css - 如何获得两列布局，左侧在引导程序中有 2 行

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

引导搜索嵌套列

它最终会与此类似（未经测试）

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