css - 带有引导网格系统的嵌套行？

Question

我想要 1 个较大的图像和 4 个较小的图像，格式为 2x2，如下所示：

我最初的想法是将所有东西放在一排。然后创建两列，并在第二列中创建两行两列以创建 1x1 和 2x2 效果。

但是，这似乎是不可能的，或者我只是没有正确地做到这一点？

Answer 1

引导程序版本 3.x

和往常一样，阅读 Bootstrap 的优秀文档：

3.x 文档：https ://getbootstrap.com/docs/3.3/css/#grid-nesting

确保父级行位于.container元素内。每当您想嵌套行时，只需.row在列内打开一个新的。

这是一个简单的布局：

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="big-box">image</div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"><div class="mini-box">1</div></div>
                <div class="col-xs-6"><div class="mini-box">2</div></div>
                <div class="col-xs-6"><div class="mini-box">3</div></div>
                <div class="col-xs-6"><div class="mini-box">4</div></div>
            </div>
        </div>
    </div>
</div>

引导程序版本 4.0

4.0 文档： http: //getbootstrap.com/docs/4.0/layout/grid/#nesting

这是 4.0 的更新版本，但您应该真正阅读网格上的整个文档部分，以便了解如何利用这个强大的功能

<div class="container">
  <div class="row">
    <div class="col big-box">
      image
    </div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>

  </div>
</div>

Fiddle jsFiddle 3.x中的演示| jsFiddle 4.0

看起来像这样（添加了一点样式）：

Answer 2

添加到@KyleMit 所说的，考虑使用：

• col-md-*较大外列的类
• col-xs-*较小内列的类

当您在不同的屏幕尺寸上查看页面时，这将很有用。

在小屏幕上，如果可能的话，会在保留较小的内列的同时包裹较大的外列