我想要一个较大的图像和4个较小的图像在2x2格式如下:
我最初的想法是把所有东西都放在一排。然后创建两列，在第二列中，创建两行和两列，以创建1x1和2x2效果。
然而，这似乎是不可能的，或者我只是没有正确地做它?
引导版本3.x
像往常一样，阅读Bootstrap的伟大文档:
3.x Docs: 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
它看起来像这样(添加了一点样式):
加上@KyleMit所说的，考虑使用:
Col-md -*类用于较大的外层列 用于较小的内部列的Col-xs -*类
当您在不同的屏幕尺寸上查看页面时，这将非常有用。
在小屏幕上，如果可能的话，将在保留较小的内部列的同时，对较大的外部列进行包装
