Bootstrap 3 Grid System

Question

我正在將我的一個項目從bootstrap 2遷移到bootstrap 3.現在，我遇到了一些我無法理解的網格佈局問題。我有一個col-md-12，我想在這個較大的div中添加3列等寬。從邏輯上說，3列應該是col-md-4。但是，當我添加col-md-4類的3列（div）時，它們不適合，其中一個被壓下，第二個之後留下一些空間。 請別人幫我理解我可能會丟失的東西。謝謝。

Answer 1

這聽起來像問題是填充。當嵌套col-xx-#類時，Bootstrap會自動添加填充。如果您有col-md-4作爲col-md-12的直接孩子，引導程序將添加填充，而您的第三個col-md-4將以新行結束。

你在做什麼：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="col-md-4"> 
       1/3 
      </div> 
      <div class="col-md-4"> 
       2/3 
      </div> 
      <div class="col-md-4"> 
       3/3 
      </div> 
     </div> 
    </div> 
</div> 

爲了解決這個問題，需要添加新的class="row"你的第一個col-md-4以上或者乾脆刪除col-md-12這樣的：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      1/3 
     </div> 
     <div class="col-md-4"> 
      2/3 
     </div> 
     <div class="col-md-4"> 
      3/3 
     </div> 
    </div> 
</div> 

Answer 2

Bootstrap的列布局寬度只能是12「單位」。

爲了獲得等寬的列，您應該平分12（col-md- *中的*之和應該爲12）。