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

Posted 2023-02-22

【中文标题】带有引导网格系统的嵌套行？

【英文标题】：Nested rows with bootstrap grid system?

【发布时间】：2014-08-30 19:41:50

【问题描述】：

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

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

但是，这似乎是不可能的，还是我做的不对？

【问题讨论】：

请贴出您目前尝试过的 html/CSS。

试试这个：jsfiddle.net/KXje2/9 我编辑了我的小提琴以适应大屏幕到超小屏幕。

上面的代码对你有用吗？...

【参考方案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>

小提琴中的演示jsFiddle 3.x | jsFiddle 4.0

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

【讨论】：

抱歉劫持了一个1岁的线程，但是你知道如何在图像和1和3之间获得0px

@alex，当然 - 只需在 .mini-box 元素上设置 margin: 0;。为了清楚起见，我的示例只是添加了一个，但您可以完全删除该行。 Here's a demo

为什么 minibox 2 的 col 和 minibox 3 的 col 之间没有行？如果有会发生什么？

@pashute，见Bootstrap 3 grid, does it really matter how many columns are in a row?。每个迷你盒子占用 50% 的可用空间（受列限制），因此两个将占用第一行。任何额外的都会换成新的一行。您可以将它们中的每一个都成行配对，但您不需要这样做。默认情况下，Bootstrap 会自动换行，因此您不必将标记与新行混为一谈。如果它在语义上有意义，我会说去吧。但是，如果您只是显示 4 个对象的列表，请将它们保持在同一行中。

@user3921890，这个话题太大了，无法在评论行中回答。您能否发布一个新主题来解释您正在尝试做什么以及至少一次尝试这样做，然后在此处链接到该主题。

【参考方案2】：

除了@KyleMit 所说的，考虑使用：

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

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

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