我想要 1 个较大的图像和 4 个较小的图像,格式为 2x2,如下所示:
我最初的想法是将所有东西放在一排。然后创建两列,并在第二列中创建两行两列以创建 1x1 和 2x2 效果。
但是,这似乎是不可能的,还是我做的不对?
最佳答案
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>
fiddle 演示 jsFiddle 3.x | jsFiddle 4.0
看起来像这样(添加了一点样式):
关于css - 带有 Bootstrap 网格系统的嵌套行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24659471/