Javascript 引导3个选项卡-展开选项卡'；s宽度100%

这是我的建议

我正在尝试制作一个简单的“最近的帖子”容器，类似于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 -->

一些内容显然会出现在这里
一些内容显然会出现在这里

试试这个：

使用

，

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>