Korrigieren dieses komplexe Layout mit bootstrap

Question

Ich versuche, ein komplexes Layout mit twitter-Bootstrap zu erstellen. Ich bin mir jedoch nicht sicher, was ich damit erreicht habe! Ich bin besonders verwirrt bei der Verschachtelung, wo die Elemente 4, 5, 6, 7, 8 und 9 auftreten.

Bitte überprüfen Sie das beigefügte Design.

<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

Ihre Verschachtelung ist völlig in Ordnung. hinzugefügt etwas min-height Eigenschaft, um es zu testen und funktioniert perfekt. Sie können auch min-height hinzufügen, damit es funktioniert.

#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>