引導3標籤 - 撒選項卡的寬度100％

Question

這裏的fiddle

我試圖做一個簡單的「最新文章」容器類似WordPress的插件像this

問題是我不能讓選項卡佔用全部寬度，並在每個選項卡的右側留下一些空間，我試圖增加填充但它不準確，也嘗試添加 ，但即使這樣也行不通。

任何幫助，將不勝感激。

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>