使用Bootstrap cols的Rowspan等價物？

Question

我現在有一個設置，看起來像這樣

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"></div> 
     <div class="col-md-6"></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"></div> 
    </div> 
</div> 

我想第3列添加到我的佈局，橫跨兩行向下展開。我試圖實現的格式看起來像這樣

---------------- 
|col4|col4|col4| 
|---------| | 
|col8  | | 
---------------- 

但我無法找到正確的語法來實現這一點。任何幫助，將不勝感激。

Answer 1

你可以嘗試這樣的事：

<div class="row"> 
    <div class="col-md-6"> 
     <div class="row"> 
      <div class="col-md-6">col 4</div> 
      <div class="col-md-6">col 4</div>   
     </div> 
     <div class="row">col 8</div> 
    </div> 
    <div class="col-md-6"> 
     <div class="row"> 
      <div class="col-md-12">col 4</div> 
     </div> 
    </div>  
</div> 

看看這個Bootply

Answer 2

您可以使用嵌套列來實現這種響應效果。

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="col-sm-8"> 
      <div class="col-sm-6 bg-info"></div> 
      <div class="col-sm-6 bg-warning"></div> 
      <div class="col-sm-12 bg-success"></div> 
     </div> 
     <div class="col-sm-4 bg-success"></div> 
    </div> 
</div> 

<style> 
    .col-sm-6, .col-sm-12, .col-sm-8, .col-sm-4 { 
     height: 2em; 
    } 
</style> 

看看這個JSFiddle - 試水平拉伸分壓器來看看它的外觀。