如何讓表格尊重Bootstrap 3中的網格？

Question

即使它們定義了col-xs-X類，引導表也不會尊重網格。

這裏的一個小例子，顯示瞭如何將（紅色）表不與（灰色）網格排隊：http://jsfiddle.net/fm65v3e0/

.col-xs-1 { 
 
    background-color: #eee; 
 
    border: 1px solid #999; 
 
} 
 

 
th { 
 
    background-color: #fee; 
 
    border: 1px solid red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <div class="table-responsive"> 
 
     <table class="table"> 
 
      <tr> 
 
      <th class="col-xs-5"> 
 
       5-col header 
 
      </th> 
 
      <th class="col-xs-3"> 
 
       3-col header 
 
      </th> 
 
      <th class="col-xs-4"> 
 
       4-col header 
 
      </th> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

因爲表出現在列內其在外面有一定量的填充物。如果我從列中刪除填充，則表格會排成一行，但當然現在列中的任何文本都將與下一列齊平。

此外，Bootstrap表默認爲100％寬度，如果不使用全部12列，則分配任何「備用」空間。

我的網站幾乎是完全列表數據，所以如果我沒有我的表尊重網格有點像我根本沒有使用網格。你認爲我能輕鬆解決這個問題嗎？嘗試解決這個問題/關心這個問題是錯誤的嗎？

Answer 1

您的引導程序CSS將padding-right: 15px和padding-left: 15px添加到所有col-xx-xx元素。

刪除或重寫填充，東西應該正確對齊。下圖顯示了刪除填充時在Bootply中發生的情況。覆蓋此

一種方法是創建一個名爲no-padding類，像這樣：

.no-padding { 
    padding-left: 0; 
    padding-right: 0 
} 

，並將其應用到您不想應用填充任何元素。 Here's an updated JS Fiddle showing this。