Bootstrap 3标签-展开标签's宽度100%

Bootstrap 3 Tabs - Spreading Tab's width 100%

本文关键字：标签 宽度 100% Bootstrap      更新时间：2023-09-26

这是小提琴

我正在尝试制作一个简单的"最近的帖子"容器，类似于像这样的wordpress小部件

问题是我无法使选项卡占据整个宽度，并且每个选项卡的右侧都留有一些空间，我试图增加填充，但不准确，还尝试添加；但即便如此也无济于事。

如有任何帮助，我们将不胜感激。

HTML代码：

<div class="container">
    <div class="row">
        <div class="col-lg-5 col-md-5 col-sm-5">
            <ul class="nav nav-tabs" role="tablist">
                <li class="active">
                    <a href="#popular" role="tab" data-toggle="tab">
                    Popular
                    </a>
                </li>
                <li>
                    <a href="#recent" role="tab" data-toggle="tab">
                    Recent
                    </a>
                </li>
                <li>
                    <a href="#comments" role="tab" data-toggle="tab">
                    Comments
                    </a>
                </li>
                </ul><!-- /.nav-tabs -->
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="popular">
                        <ul class="popular-list list-normal">
                            <li>
                                <div class="text">
                                    <a href="#">Sample Title for a Post </a>
                                    <p class="meta">
                                </div><!-- /.text -->
                                <div class="image">
                                </div><!-- /.image -->
                            </li>
                        </ul><!-- /.popular-list -->
                    </div><!-- /.tab-pane -->
                    <div class="tab-pane fade" id="recent">
                        Some Content Will obviously come here
                    </div><!-- /.tab-pane -->
                    <div class="tab-pane fade" id="comments">
                        Some Content Will obviously come here
                    </div><!-- /.tab-pane -->
                </div><!-- /.tab-content -->
        </div><!-- /.col-5 -->
    </div><!-- /.row -->
</div><!-- /.container -->

试试这个：

使用<ul class="list-group">、<li class="list-group-item">

演示

HTML:

<div class="container">
            <div class="row">
                <div class="col-lg-5 col-md-5 col-sm-5">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active">
                            <a href="#popular" role="tab" data-toggle="tab">Popular
                            </a>
                        </li>
                        <li>
                            <a href="#recent" role="tab" data-toggle="tab">Recent
                            </a>
                        </li>
                        <li>
                            <a href="#comments" role="tab" data-toggle="tab">Comments
                            </a>
                        </li>
                    </ul>
                    <!-- /.nav-tabs -->
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="popular">
                            <ul class="list-group popular-list list-normal">
                                <li class="list-group-item">
                                    <div class="text">
                                        <a href="#">Sample Title for a Post </a>
                                        <p class="meta">
                                    </div>
                                    <!-- /.text -->
                                    <div class="image">
                                    </div>
                                    <!-- /.image -->
                                </li>
                            </ul>
                            <!-- /.popular-list -->
                        </div>
                        <!-- /.tab-pane -->
                        <div class="tab-pane fade" id="recent">
                            Some Content Will obviously come here
                        </div>
                        <!-- /.tab-pane -->
                        <div class="tab-pane fade" id="comments">
                            Some Content Will obviously come here
                        </div>
                        <!-- /.tab-pane -->
                    </div>
                    <!-- /.tab-content -->
                </div>
                <!-- /.col-5 -->
            </div>
            <!-- /.row -->
        </div>
相关文章：