使用Bootstrap网格系统的嵌套行？

Question

我想要一个大图像，其中包含四个小图像，以2x2的格式呈现，就像这样：

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

然而，这似乎不可能实现，或者我只是没有正确地操作？

- Greg

---

请发布您已经尝试过的HTML/CSS代码。 - Steve Sanders

试试这个：http://jsfiddle.net/KXje2/9/ 我编辑了我的 fiddle 以适应从大到超小的屏幕。 - BuddhistBeast

以上的代码对你有用吗？... - BuddhistBeast

Answer 1

Bootstrap版本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>

Bootstrap 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

效果如下（稍微添加了一些样式）：

- KyleMit

---

抱歉打扰了一年前的帖子，但您知道如何在图像和1、3之间获得0像素吗？ - alex

@alex，好的 - 只需要在.mini-box元素上设置margin: 0;即可。我的示例只是为了更清晰地演示添加了一个，但你也可以完全删除该行。这里有个演示。 - KyleMit

为什么在迷你盒子2的列和迷你盒子3的列之间没有行？如果有会发生什么？ - pashute

参考链接：Bootstrap 3网格系统中，一行中有多少列真的很重要吗？。每个小框占据可用空间的50%（受列的限制），所以前两个将占据第一行。任何额外的框将自动换到新行上。你也可以将它们成对地排列在行中，但不需要这样做。Bootstrap默认会自动换行，因此您不必在标记中添加新行。如果语义上有意义，我建议您这样做。但是，如果您只是显示4个对象的列表，请将它们放在同一行中。 - KyleMit

@user3921890，这个话题过于宏大，无法在评论中回答。您能否发布一个新主题来解释您想要做什么，并至少尝试一次完成它，然后在此处链接到该主题。 - KyleMit

Answer 2

除了 @KyleMit 所说的，考虑使用以下内容：

• 对于较大的外部列，使用 col-md-* 类
• 对于较小的内部列，使用 col-xs-* 类

这将在您在不同屏幕尺寸上查看页面时非常有用。

在小屏幕上，如果可能的话，较大的外部列的包装将发生，同时保持较小的内部列。

- ezzadeen