嵌套行与自举网格系统？

我想要一个更大的图像与4个更小的图像在这样一个2×2格式：

我最初的想法是将所有东西都放在一行中。 然后创build两列，并在第二列创build两行两列来创build1x1和2×2效果。

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

Answer 1

您可以轻松地在引导程序中嵌套行 。 确保父级别行在.container元素内。 无论何时想要嵌套行，只需在列中打开一个新的.row行即可。

这里有一个简单的布局来build立：

 <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> 

在小提琴演示

这将看起来像这样（ 添加一些样式 ）：

Answer 2

添加到@KyleMit所说的内容中，考虑使用较大/外部列的col-md- *类和较小/内部列的col-xs- *类。 当您以不同的屏幕尺寸查看页面时，这会很有用。 在一个小屏幕上，如果可能的话，保持较小/内部列的同时，将会发生较大/外部列的包装。