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

194

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

图1示例

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

但是，这似乎是不可能的，或者我只是没有正确执行？

— 格雷格
source

请发布您到目前为止尝试过的HTML / CSS。

— 史蒂夫·桑德斯

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

— 佛教

上面的代码对您

— 佛教

298

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>

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

看起来像这样（带有一些附加的样式）：

屏幕截图

— 凯尔·米特
source

对不起，劫持一个1岁的线程，但你知道如何让0像素图像和1和3之间

— 亚历克斯

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

— KyleMit 2015年

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

— pashute

@pashute，请参见Bootstrap 3网格，真的有多少行连续吗？。每个迷你盒占用50％的可用空间（受列限制），因此两个将占据第一行。任何多余的内容都将自动换行。您也可以将它们中的每一个成对配对，但不必这样做。默认情况下，Bootstrap会自动换行，因此您不必用新行将标记弄乱。如果它在语义上有意义，我会说。但是，如果仅显示4个对象的列表，请将它们放在同一行中。

— KyleMit 2015年

@ user3921890，这个话题太大了，无法在评论行中回答。您能否发布一个新线程来说明您要执行的操作，至少要尝试执行一次，然后在此处链接到该线程。

— KyleMit '16

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

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

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

在小屏幕上，如果可能的话，将在保持较小的内部列的同时进行较大外部列的包裹

— 埃扎丁
source