Html 使用引导网格系统嵌套行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24659471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nested rows with bootstrap grid system?
提问by Greg
I want 1 larger image with 4 smaller images in a 2x2 format like this:
我想要 1 张较大的图像和 4 张较小的图像，采用 2x2 格式，如下所示：
My initial thought was to house everything in one row. Then create two columns, and, in the second column, create two rows and two columns to create the 1x1 and 2x2 effect.
我最初的想法是将所有东西排成一排。然后创建两列，并在第二列中创建两行两列以创建 1x1 和 2x2 效果。
However, this doesn't seem to be possible, or I am just not doing it correctly?
但是，这似乎不可能，或者我只是没有正确执行？
回答by KyleMit
Bootstrap Version 3.x
引导程序版本 3.x
As always, read Bootstrap's great documentation:
与往常一样，阅读 Bootstrap 的优秀文档：
3.x Docs: https://getbootstrap.com/docs/3.3/css/#grid-nesting
3.x 文档：https: //getbootstrap.com/docs/3.3/css/#grid-nesting
Make sure the parent level row is inside of a .containerelement. Whenever you'd like to nest rows, just open up a new .rowinside of your column.
确保父级别行位于.container元素内部。每当您想嵌套行时，只需.row在列中打开一个新的内部即可。
Here's a simple layout to work from:
这是一个简单的布局：
<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 Version 4.0
引导程序版本 4.0
4.0 Docs: http://getbootstrap.com/docs/4.0/layout/grid/#nesting
4.0 文档：http: //getbootstrap.com/docs/4.0/layout/grid/#nesting
Here's an updated version for 4.0, but you should really read the entire docs section on the grid so you understand how to leverage this powerful feature
这是 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>
Demo in Fiddle jsFiddle 3.x| jsFiddle 4.0
Fiddle 中的演示jsFiddle 3.x| jsFiddle 4.0
Which will look like this (with a little bit of added styling):
看起来像这样（添加一点样式）：
回答by ezzadeen
Adding to what @KyleMit said, consider using:
添加@KyleMit所说的，考虑使用：
col-md-*classes for the larger outer columnscol-xs-*classes for the smaller inner columns
col-md-*较大外柱的类col-xs-*较小的内部列的类
This will be useful when you view the page on different screen sizes.
当您在不同的屏幕尺寸上查看页面时，这将非常有用。
On a small screen, the wrapping of larger outer columns will then happen while maintaining the smaller inner columns, if possible
在小屏幕上，如果可能的话，将在保持较小的内列的同时包装较大的外列
