带引导网格系统的嵌套行？
Gre*_*reg 181 css grid html5 grid-system twitter-bootstrap
我希望1个更大的图像和2个2x2格式的4个小图像,如下所示:
我最初的想法是将所有东西都放在一排.然后创建两列,并在第二列中创建两行和两列以创建1x1和2x2效果.
但是,这似乎不可能,或者我只是没有正确地做到这一点？
Kyl*_*Mit 282
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>
演示小提琴jsFiddle 3.x | jsFiddle 4.0
这将是这样的(添加一些样式):
- 为什么在coloxox 2的col和coloxox 3的col之间没有行？如果有的话会发生什么？ (4认同)
- @pashute,请参阅[Bootstrap 3网格,确实*真的*连续多少列？](http://stackoverflow.com/a/23502516/1366033).每个迷你盒占用可用空间的50%(受列限制),因此两个占据第一行.任何额外的只会换成新的一行.你*也可以*在行中配对它们,但你不需要.默认情况下,Bootstrap包装,因此您不必使用新行来混淆标记.如果它在语义上有意义,我会说去吧.但是,如果您只是显示4个对象的列表,请将它们保存在同一行中. (3认同)
- 很抱歉劫持了一个 1 岁的线程，但是您知道如何在图像与 1 和 3 之间获得 0px (2认同)
- @alex,当然 - 只需在`.mini-box`元素上设置`margin:0;`.我的例子只是为了清晰起见而添加一个,但你可以完全删除该行.[**这是一个演示**](http://jsfiddle.net/KyleMit/fbtw6/210/) (2认同)
- @ user3921890，这个话题太大，无法在评论行中回答。您能否发布一个新线程来解释您正在尝试做的事情以及至少一次尝试做的事情，然后在此处链接到该主题。 (2认同)
添加@KyleMit所说的，考虑使用：
col-md-*较大外柱的类col-xs-*较小的内部列的类
当您在不同的屏幕尺寸上查看页面时，这将非常有用。
在小屏幕上，如果可能的话，将在保持较小的内列的同时包装较大的外列