爲什麼3個span4 bootstrap div將第三個推到一個新行

Question

我以爲bootstrap是基於12列的網格系統。但以下代碼：

<div class="container"> 
    <div class="row"> 
     <div class="example-box span4">Example Text</div> 
     <div class="example-box span4">Example Text</div> 
     <div class="example-box span4">Example Text</div> 
    </div> 
    </div> 

始終將最後一個div推到下一行，同時保持其他兩個在同一行上。我在這裏錯過了什麼嗎？刪除最後一個盒子的保證金權利似乎也不起作用。

Answer 1

很可能您的example-box類包含導致Bootstrap模型中斷的盒模型屬性。最有可能的解決方案是使用內部div元素，在其上應用自定義CSS類（ES），像這樣：

<div class="container"> 
    <div class="row"> 
     <div class="span4"> 
      <div class="example-box">Example Text</div> 
     </div> 
     <div class="span4"> 
      <div class="example-box">Example Text</div> 
     </div> 
     <div class="span4"> 
      <div class="example-box">Example Text</div> 
     </div> 
    </div> 
</div> 

Answer 2

如果向這些span4的任何一個添加了填充或邊框，就會導致這種情況發生。

Answer 3

也許你沒有在你的代碼的CSS重置？這可能會導致它將最後一個div推到下一行。只是一個想法。