我想要 1 个较大的图像和 4 个 2x2 格式的较小图像，如下所示：
我最初的想法是将所有东西都放在一排。然后创建两列，并在第二列中创建两行和两列以创建 1x1 和 2x2 效果。
但是，这似乎不可能，或者我只是做得不正确？
引导版本 3.x
与往常一样，请阅读 Bootstrap 的精彩文档：
3.x Docs: https://getbootstrap.com/docs/3.3/css/#grid-nesting 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 Docs: http://getbootstrap.com/docs/4.0/layout/grid/#nesting 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 http://jsfiddle.net/KyleMit/fbtw6/ | jsFiddle 4.0 http://jsfiddle.net/KyleMit/4bo2uxgs/
看起来像这样（添加一点样式):
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
