我怎麼弄兩點欄佈局，左側具有引導

Question

2行我需要一個佈局，看起來像這樣：

我怎樣才能做到這一點的樣子（每列是整個頁面和相同的50％對於左邊的每一行）。

我正在嘗試使用容器流體和排液。這是我嘗試過的，但是紫色部分......在頁面上要低得多。偏移但與左側不相同。

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div id="top" class="span6"></div> 
    </div> 
    <div class="row-fluid"> 
    <div id="bottom" class="span6"></div> 
    </div> 
    <div class="row-fluid"> 
    <div id="canvas" class="span6 offset6"></div> 
    </div> 
</div> 

Answer 1

Bootstrap搜索嵌套列

它最終將與此類似（未經測試）

<div class="container-fluid" style="background:yellow;height:400px;"> 
    <div class="row-fluid" style="height:100%;border:1px solid #aaa;"> 
    <div class="span6" style="height:100%;"> 
     <div class="row-fluid" style="height:50%;"> 
     <div class="span12" style="background:blue;height:100%;">a</div> 
     </div> 
     <div class="row-fluid" style="height:50%;"> 
     <div class="span12" style="background:red;height:100%;">b</div> 
     </div> 
    </div> 
    Right side 
    </div> 
</div> 

Answer 2

此標記應該滿足您的需求，

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span6"> 
      <div class="row-fluid"> 
       <div class="span12 red">test</div> 
      </div> 
      <div class="row-fluid"> 
       <div class="span12 red">test</div> 
      </div> 
     </div> 
     <div class="span6 blue"> 
      test 
     </div> 
    </div> 
</div> 
<style> 
    .red 
    { 
     background-color: red; 
     min-height:200px; 
    } 
    .blue 
    { 
     background-color: blue; 
     min-height:200px; 
    } 
    </style> 

爲了刪除你只需要覆蓋默認引導CSS的左邊距。