twitter-bootstrap - Bootstrap 行和列 - 我需要使用行吗？

Question

我只需要澄清 Bootstrap Grid 的行和列中的某个点。
在此链接上:http://getbootstrap.com/css/#grid ;引言下的第三点说:
“内容应该放在列中，并且只有列可以是行的直接子级。”

这到底是什么意思？
我想做的是放两列: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>

或者我是否必须在 xol-xs-12 中插入一个新的(和嵌套的..我想)行，然后在该行中插入另外 2 个列？

Answer 1

Bootstrap 5(2022 年更新)
技术上row Bootstrap 5 中不需要，因为 columns can be used standalone设置宽度，但是，row flexbox 仍然需要 grid system这是使用列的主要方式。

Bootstrap 3，Bootstrap 4(原始答案)

Bootstrap Rows and Columns - Do I need to use row?

是的，您需要使用行。

2018 年更新 row > col 中的关系相同 Bootstrap 3 和 4 在那里面..
“只有列可能是行的直接子级”
因此，嵌套列 ( .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>

如you can see here您应该始终使用 row .这在 中非常重要 Bootstrap 4 因为这些列将 只需垂直堆叠(包装)如果没有放在 .row 内. .row两边都有 15px 的负边距，所以好处是..

container 内的 100% 宽度内容

将内容分成行(强制列在线)

嵌套网格行>col 并在外侧保持对齐

来自 Bootstrap 3 Docs ...

Content should be placed within columns, and only columns may be immediate children of rows.

来自 Bootstrap 4 Docs ...

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