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

这可以为您提供所需的设置。

Answer 2

我认为this是你想要实现的目标。

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3">X<br>X</div>
    <div class="col-xs-9">
      <div class="row">
        <div class="col-xs-12">Y</div>
        <div class="col-xs-12">Takes up the full width</div>
      </div>
    </div>
  </div>
</div>

你非常接近但需要嵌套额外的列。查看Nesting columns

的文档

如果您已自定义Bootstrap类名称，则需要更新为自己的类。

Bootstrap网格系统并排

2 个答案: