如何获得两个列布局，左侧有两行引导程序

Question

我需要一个看起来像这样的布局：

如何实现这一目标（每列占整个页面的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>

为了删除左边距，您只需覆盖默认的bootstrap css。