html - 并行 Bootstrap 网格系统

Question

我想创建一个全宽的正确容器。左边的容器是两个容器。

所以左边的容器 x 将是两个容器，顶部和底部。 Y 会占据右侧的整个空间。我应该怎么做？

X   Y
X   takes up all the space

下图是两个并排占据整个宽度的大容器。

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

Answer 1

因此，我发现最简单的方法是在行和列中更深入。这是一个例子:

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                 X1 here
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                 X2 here
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                 Y here
            </div>
        </div>
    </div>
</div>

这是它的一个例子:http://www.bootply.com/q9SCaxVAKB

这应该会为您提供所需的设置。