我想要一个2x2格式的4个较小图像的较大图像,如下所示:
我最初的想法是把所有东西都放在一排。然后创建两列,并在第二列中创建两行和两列以创建1x1和2x2效果。
然而,这似乎不可能,或者我只是没有正确地做到这一点?
答案 0 :(得分:271)
与往常一样,请阅读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文档: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>
这将是这样的(添加了一些样式):
答案 1 :(得分:4)
添加@KyleMit所说的内容:
col-md-*
类用于更大的col-xs-*
类
当您在不同的屏幕尺寸上查看页面时,这将非常有用。在小屏幕上使用: