創建使用引導

Question

使用佈局我需要創建一個佈局引導3. 我的佈局應該與此類似 -

在這裏，我可以創造紅柱，但其他有一些混亂。

這是我到目前爲止的代碼 -

<div class="container"> 
    <div class="row"> 
    <section class="col-sm-5"> 

    </section> 
    <section class="col-sm-7"> 

    </section> 
</div> <!-- /.row --> 
</div> <!-- /.container --> 

可有人告訴我怎樣創建一個使用引導其他列？

Answer 1

您可以嵌套元素。將第二列（藍色和綠色）看作單頁。

在第二列（您的col-sm-7）內創建2行。第一個包含一個col-sm-12這將成爲您的藍色框，第二行有兩個col-sm-6元素爲每個綠色框。

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-5"> 
      RED 
     </div> 

     <div class="col-sm-7"> 
      <div class="row"> 
       <div class="col-sm-12"> 
        BLUE 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-sm-6"> 
        LEFT-GREEN 
       </div> 
       <div class="col-sm-6"> 
        RIGHT-GREEN 
       </div> 
      </div> 
     </div> 

    </div> 
</div> 

，這裏是它在bootply運行：http://www.bootply.com/um1CasObEK

Answer 2

的HTML

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

一些樣品css來使它看起來像你的例子：

div { background: #EEE; margin: 0px; min-height: 200px; } 
.blue { background: #2800FD; border: 5px solid #fff;} 
.col-md-6, .col-md-4 {border: 5px solid #fff; } 
.col-md-6 { min-height: 200px; background: #0AA025;} 
.col-md-4 { min-height: 400px; background: #FF0101;}