如何在Bootstrap Grid System中顯示兩列比默認值更接近

在以下HTML中，我使用Bootstrap。如下圖所示的真實顯示有兩列相隔太遠。我怎樣才能讓他們顯得更接近彼此。如何在Bootstrap Grid System中顯示兩列比默認值更接近

注意：爲簡潔起見本文，我簡化了一下html。真正的html包含一些編程代碼 - 比如foreach循環和數據庫中的數據提取等 - 因爲這些都與本文無關。

<div class="row"> 
    <div class="col-md-12"> 
     <table class="table table-borderless table-condensed"> 
      <thead> 
       <tr><th></th><th></th></tr> 
      </thead> 
      <tbody> 
       <tr> 
       <td class="col-md-2"> 
        <a href="some link">item1</a> 
       </td> 
       <td class="col-md-10"> 
        <span>item2</span> 
       </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div>

顯示：

UPDATE：如果我改變第一列<td class="col-md-2">到<td class="col-md-1">和第二列<td class="col-md-10">到<td class="col-md-11">在第一列中的內容被包裹（東西我不不需要，因爲第一列中的所有內容都是固定長度的，因此它不需要被包裝）。

來源

2016-12-02 nam

我想你更新的代碼，它不爲我包裹。第一列擴大。你的div的寬度是否受到限制？ – TG01

排水溝（總是30px的列之間的間距），所以你需要定製它或不使用網格：http://stackoverflow.com/questions/19911763/how-to-adjust-gutter-in-bootstrap-3 -grid-system – ZimSystem

爲了解決與第一列更新的代碼更改爲COL-MD-1，你可以添加文字，NOWRAP解決您的包裝問題：

<td class="col-md-1; text-nowrap">

來源

2016-12-02 16:33:32 TG01

您的解決方案有效。這是正確的方法還是有更好的選擇？ – nam

好吧，這只是許多可能的解決方案之一。 text-nowrap是一個有效的引導程序元素。我不認爲這會影響性能或造成負面渲染問題。 – TG01

如何在Bootstrap Grid System中顯示兩列比默認值更接近

回答

相關問題