twitter-bootstrap Bootstrap 行和列 - 我需要使用行吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22053195/
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
Bootstrap Rows and Columns - Do I need to use row?
提问by Rahul Patwa
I just need clarification with a certain point in Bootstrap Grid's rows and columns.. On this link: http://getbootstrap.com/css/#grid; the 3rd point under Introduction says: "Content should be placed within columns, and only columns may be immediate children of rows."
我只需要澄清 Bootstrap Grid 的行和列中的某个点。在这个链接上：http: //getbootstrap.com/css/#grid; 简介下的第 3 点说：“内容应该放在列中，并且只有列可以是行的直接子项。”
What exactly does this mean? What I am trying to do is put 2 columns: col-xs-4, col-xs-8; inside col-xs-12 which is itself inside a row. Will this work..
这到底是什么意思？我想要做的是放两列：col-xs-4，col-xs-8；在 col-xs-12 内，它本身在一行内。这行得通吗..
<div class="row">
<div class="col-xs-12">
<div class="col-xs-4">some content</div>
<div class="col-xs-8">some other content</div>
</div>
Or will I have to insert a new(and nested..i suppose) row inside xol-xs-12 and then the other 2 cols in that row ?
或者我是否必须在 xol-xs-12 中插入一个新的（和嵌套的..我想）行，然后在该行中插入其他 2 列？
回答by Zim
Bootstrap Rows and Columns - Do I need to use row?
Bootstrap 行和列 - 我需要使用行吗？
Yes, you needto use row.
是的，您需要使用行。
Update 2018
2018 年更新
The row>colrelationship is the same in both Bootstrap 3 and 4in that..
所述row>col关系是在两个相同的自举3和4中的..
"only columns may be immediate children of rows"
“只有列可能是行的直接子项”
So, the nested columns (.col-*) mustalso be inside a .row:
因此，嵌套列（.col-*）必须也内.row：
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-4">some content</div>
<div class="col-xs-8">some other content</div>
</div>
</div>
</div>
As you can see hereyou should always use the row. This is veryimportant in Bootstrap 4because the columns will simply stack (wrap) verticallyif not placed inside a .row. The .rowhas a negative margin of 15px on either side, so the benefit is that..
正如您在此处看到的，您应该始终使用row. 这是非常在重要自举4，因为列将简单地堆叠（套）垂直如果不放置内部的 .row。的.row具有15像素两侧的负余量，因此好处是..
- 100% width content inside
container - separate content into rows (force cols to be on line)
- nest the grid row>col and maintain alignment on outer sides
- 内部 100% 宽度内容
container - 将内容分成行（强制列在线）
- 嵌套网格行>col 并在外侧保持对齐
From the Bootstrap 3 Docs...
来自Bootstrap 3 文档......
Content should be placed within columns, and only columns may be immediate children of rows.
内容应该放在列中，并且只有列可以是行的直接子项。
From the Bootstrap 4 Docs...
来自Bootstrap 4 文档......
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side... content must be placed within columns and only columns may be immediate children of rows.
行是列的包装器。每列都有水平填充（称为装订线），用于控制它们之间的空间。然后在具有负边距的行上抵消此填充。这样，列中的所有内容都在左侧视觉上对齐......内容必须放置在列中，并且只有列可以是行的直接子项。
https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc
https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc
回答by Mo.
You should have parent <div class="row">for using <div class="col-*>
你应该有父母<div class="row">使用<div class="col-*>
something like this
像这样的东西
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-4">some content</div>
<div class="col-xs-8">some other content</div>
</div>
</div>
</div>
