Bootstrap 3标签 - 传播标签的宽度100％

Question

这是fiddle

我正在尝试创建一个简单的“最近帖子”容器，类似于this

等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 -->

Answer 1

试试这个：

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

DEMO

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>