自舉網格列彼此重疊

Question

我有一個Bootstrap的網格佈局和其中的列重疊的問題。我不確定這個問題是真的，任何建議將不勝感激，謝謝。

<div class="container">  

    <div class="row"> 
     <div class="col-md-6"> 
      <img src="content/one.png"> 
     </div> 

     <div class="col-md-6"> 
      <div class="row"> 
       <div class="col-md-6"><img src="content/two.png"></div> 
       <div class="col-md-6"><img src="content/three.png"></div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"><img src="content/four.png"></div> 
       <div class="col-md-6"><img src="content/five.png"></div> 
      </div> 
     </div> 

     <div class="col-md-9"> 
      <div class="row"> 
       <div class="col-md-3"><img src="content/six.png"></div> 
       <div class="col-md-9"><img src="content/seven.png"></div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"><img src="content/eight.png"></div> 
       <div class="col-md-6"><img src="content/nine.png"></div> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <img src="content/ten.png"> 
     </div> 
    </div> 

</div> 

截圖電網 - http://i.stack.imgur.com/a3YBr.jpg

Answer 1

網格語法不正確：您的第一行div有COL-MD-6，COL-MD-6，COL-MD-9和Col-MD- 3作爲孩子。引導電網系統有12列，而不是24

也許嘗試這樣的事情（包裝COL-MD-9和Col-MD-3到一個新的行格）：

<div class="container"> 

    <div class="row"> 
     <div class="col-md-6"> 
      <img src="content/one.png"> 
     </div> 

     <div class="col-md-6"> 
      <div class="row"> 
       <div class="col-md-6"><img src="content/two.png"></div> 
       <div class="col-md-6"><img src="content/three.png"></div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"><img src="content/four.png"></div> 
       <div class="col-md-6"><img src="content/five.png"></div> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-md-9"> 
      <div class="row"> 
       <div class="col-md-3"><img src="content/six.png"></div> 
       <div class="col-md-9"><img src="content/seven.png"></div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"><img src="content/eight.png"></div> 
       <div class="col-md-6"><img src="content/nine.png"></div> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <img src="content/ten.png"> 
     </div> 
    </div> 

</div> 

Answer 2

我用您的網格語法清晰的bootply，刪除圖像，它似乎工作正常。你還沒有做過jsfiddle或bootply，所以沒有它就無法幫助你。這是你的網格是什麼樣子，只有文字：

Bootply example

嘗試加入IMG響應類欄目內的所有圖像，以防止其溢出他們在列

Answer 3

如果你想。實現了16×16格，你的嵌套列寬度不正確：

開始通過查看本節：

<div class="col-md-9"> 
     <div class="row"> 
      <div class="col-md-3"><img src="content/six.png"></div> 
      <div class="col-md-9"><img src="content/seven.png"></div> 
     </div> 

您在3/4列（9/12）中嵌套1/4列（3/12）。要計算出列的最終寬度，請將它們相乘並得到3/16。你真的想要一個1/4（4/16）列。爲了解決這個問題，你需要劃分這種（3/4）部分投入三分，而不是四分之三（4/12 = 1/3和8/12 = 2/3）：

<div class="col-md-9"> 
     <div class="row"> 
      <div class="col-md-4"><img src="content/six.png"></div> 
      <div class="col-md-8"><img src="content/seven.png"></div> 
     </div> 

爲了使問題更加很明顯，爲包含seven.png的單元添加背景顏色。你會發現顏色會填滿空白區域，所以細胞就在那裏。這張照片太狹窄了，不足以讓它變得明顯。

相同的修訂是必要的這一部分的下半部分：

 <div class="row"> 
      <div class="col-md-6"><img src="content/eight.png"></div> 
      <div class="col-md-6"><img src="content/nine.png"></div> 
     </div> 
    </div> 

現在你走在3/4列和分裂成1/2左右（乘一次），你正在創建一個3/8（6/16）列在左邊你想要1/2（8/16）和3/8（6/16）列在右邊你想要1/4（4/16）和另一個。同樣，解決方法是平衡分成三分：

 <div class="row"> 
      <div class="col-md-8"><img src="content/eight.png"></div> 
      <div class="col-md-4"><img src="content/nine.png"></div> 
     </div> 
    </div> 

並再次，如果你把背景顏色背後nine.png，你會看到，它並填補空白。