Html Bootstrap 4 一行内的多行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42556695/
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
Multiple rows inside a row with Bootstrap 4
提问by MortenMoulder
I'm trying to create a full width page using Bootstrap. I have a setup similar to this:
我正在尝试使用 Bootstrap 创建一个全宽页面。我有一个类似的设置：
<body>
<div class="container-fluid">
<div class="row">
The first row goes here
</div>
<div class="row">
The second row goes here
</div>
<div class="row">
The third row goes here
</div>
</div>
</body>
If I wanted to create a row inside a row, how would I do that? This is what I am trying to achieve:
如果我想在一行中创建一行，我该怎么做？这就是我想要实现的目标：
<body>
<div class="container-fluid">
<div class="row">
<div class="row text-center">
<h1>Some title</h1>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</body>
So basically I want to put the title on one row and some grids on another row. The tricky part here is, I want to place some columns that are 4 columns wide in the middle, and then have "2 columns padding" on the left and right.
所以基本上我想把标题放在一行，把一些网格放在另一行。这里的棘手部分是，我想在中间放置一些 4 列宽的列，然后在左右两侧有“2 列填充”。
My question may sound like others, but is unique because of the padding. How do I make this layout properly?
我的问题可能听起来像其他人，但由于填充而独特。如何正确制作此布局？
回答by tao
Bootstrap has a smart (but delicate) gutters system providing "natural" (margins + paddings) for content on all devices 1.
Bootstrap 有一个智能（但精致）的排水沟系统，为所有设备1上的内容提供“自然”（margins + paddings）。
This system is based on two simple assumptions:
该系统基于两个简单的假设：
- columns are immediate children of
.rows 2 - content is placed inside columns
- 列是
.rows 2 的直接孩子 - 内容放置在列内
That's why, if you want to place a .rowinside another .row(to further divide one of your cols), you'd have to use this markup:
这就是为什么，如果你想把一个.row放在另一个里面.row（以进一步划分你的一个列），你必须使用这个标记：
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-md-4 offset-md-2">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
</div>
</div>
</div>
The above doesn't make much sense by itself (you could just use the markup of the child row and you'd get the same result). But it's useful when you want to offset (or limit) an entire area of a layout, like this:
以上本身并没有多大意义（您可以只使用子行的标记，您会得到相同的结果）。但是当您想要偏移（或限制）布局的整个区域时，它很有用，如下所示：
<div class="row">
<div class="col-md-8 offset-md-2 col-sm-10 offset-sm-1 col offset-0">
<div class="row">
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
<div class="col-md-6">Grid</div>
<div class="col-md-6">More grid</div>
</div>
</div>
</div>
See this fiddlefor a live example.
看到这个小提琴的一个活生生的例子。
1To get rid of Bootstrap's gutters (in v4), one would need to apply no-guttersclass on .row.
1要摆脱 Bootstrap 的排水沟（在 v4 中），需要no-gutters在.row.
2This is a "general principle", not a "strict rule". Other elements are allowed (and even recommended) as direct children of .rows (such as column breaks). At the other end, other elements extend from .rows (such as .form-rows), thus inheriting the gutters system and being valid column parents.
2这是“一般原则”，而不是“严格规则”。允许（甚至推荐）其他元素作为.rows 的直接子元素（例如分栏符）。在另一端，其他元素从.rows扩展（例如.form-rows），从而继承了装订线系统并成为有效的列父项。
回答by Zim
.rowshould not be the immediatechild of another.row.col*should not be the immediatechild of another.col*
.row不应该是另一个人的直接孩子.row.col*不应该是另一个人的直接孩子.col*
From the Bootstrap docs:
来自 Bootstrap 文档：
"Content should be placed within columns, and only columns may be immediate children of rows."
“内容应该放在列中，只有列可以是行的直接子项。”
I don't understand why you think you need a row in a row, and what's wrong with just using your layout w/o the nested row. Do you realize that col-12is the width of a full row?
我不明白为什么您认为您需要连续一行，以及仅使用您的布局而没有嵌套的row. 你知道这col-12是一整行的宽度吗？
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center">
<h1>Some title</h1>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-4">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
<div class="col-md-2">
</div>
</div>
</div>
http://www.codeply.com/go/jfrWn4QDf1
http://www.codeply.com/go/jfrWn4QDf1
Bootstrap 4, the same rule applies:
Bootstrap 4，同样的规则适用：
"Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them... In a grid layout, content must be placed within columns and only columns may be immediate children of rows" __ Bootstrap 4.1 Docs
“行是列的包装器。每列都有水平填充（称为装订线）以控制它们之间的空间......在网格布局中，内容必须放置在列中，并且只有列可以是行的直接子项”__ Bootstrap 4.1文档
链接： Columns must be immediate children of rows?列必须是行的直接子项？
