需要使用引導程序更正此複雜佈局

Question

我正在嘗試使用twitter-bootstrap創建複雜佈局。但是，我不確定我到目前爲止所取得的成就！對於元素4,5,6,7,8和9發生的嵌套，我特別困惑。

請檢查附上的設計。

<div class="container"> 
      <div class="row"> 
       <div class="col-md-3"> 
        <div class="row"> 
         <div class="col-md-12">1</div> 
        </div> 
        <div class="row"> 
         <div class="col-md-12">2</div> 
        </div> 
        <div class="row"> 
         <div class="col-md-12">3</div> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="row"> 
         <div class="col-md-8"> 
          <div class="row"> 
           <div class="col-md-12">4</div> 
          </div> 
          <div class="row"> 
           <div class="col-md-12">5</div> 
          </div> 
         </div> 
         <div class="col-md-4">6</div> 
        </div> 
        <div class="row"> 
         <div class="col-md-12">7</div> 
        </div> 
       </div> 
       <div class="col-md-3"> 
        <div class="row"> 
         <div class="col-md-12">8</div> 
        </div> 
        <div class="row"> 
         <div class="col-md-12">9</div> 
        </div> 
       </div> 
      </div> 
     </div> 

Answer 1

你的嵌套是完全沒有問題。增加了一些min-height屬性來測試它，並完美地工作。您也可以添加min-height以使其工作。

#one { 
 
background-color: black; 
 
} 
 
#two { 
 
background-color: blue; 
 
} 
 
#three { 
 
background-color: green; 
 
} 
 
#four { 
 
background-color: red; 
 
} 
 
#five { 
 
background-color: yellow; 
 
} 
 
#six { 
 
background-color: orange; 
 
min-height: 40px; 
 
} 
 
#sev { 
 
background-color: violet; 
 
} 
 
#eight { 
 
background-color: gold; 
 
min-height: 30px; 
 
} 
 
#nine { 
 
background-color: brown; 
 
min-height: 30px; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
      <div class="row"> 
 
       <div class="col-md-3"> 
 
        <div class="row"> 
 
         <div id="one" class="col-md-12">1</div> 
 
        </div> 
 
        <div class="row"> 
 
         <div id="two" class="col-md-12">2</div> 
 
        </div> 
 
        <div class="row"> 
 
         <div id="three" class="col-md-12">3</div> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-6"> 
 
        <div class="row"> 
 
         <div class="col-md-8"> 
 
          <div class="row"> 
 
           <div id="four" class="col-md-12">4</div> 
 
          </div> 
 
          <div class="row"> 
 
           <div id="five" class="col-md-12">5</div> 
 
          </div> 
 
         </div> 
 
         <div id="six" class="col-md-4">6</div> 
 
        </div> 
 
        <div class="row"> 
 
         <div id="sev" class="col-md-12">7</div> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-3"> 
 
        <div class="row"> 
 
         <div id="eight" class="col-md-12">8</div> 
 
        </div> 
 
        <div class="row"> 
 
         <div id="nine" class="col-md-12">9</div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>