“只有列可能是行的直接子项”

Question

我只需要对Bootstrap Grid的行和列中的某一点进行澄清。在此链接上：http://getbootstrap.com/css/#grid;引言中的第3点说： “内容应放在列中，只有列可能是行的直接子项。”

这究竟是什么意思？我要做的是放两列：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个col？

Answer 1

Bootstrap行和列 - 我是否需要使用行？

是的，您需要才能使用行。

更新2018年

Bootstrap 3和4 中的row＆gt; col关系相同..

“只有列可能是行的直接子项”

因此，嵌套列（.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
将内容分成行（强制cols在线）
嵌套网格行＆gt; col并保持外侧对齐

来自Bootstrap 3 Docs ...

内容应放在列中，仅列行的直接子项。

来自Bootstrap 4 Docs ...

行是列的包装器。每列都有水平填充（称为装订线）用于控制它们之间的空间。这个填充然后在具有负边距的行上抵消。这样，全部列中的内容在左侧可视对齐...内容必须放在列中，而只有列可能是直接的子列行

https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc

Answer 2

2021 年更新

不，您不再需要行。来自Bootstrap 5.0 documentation：

<块引用>

.col-* 类也可以在 .row 之外使用来给出一个元素特定的宽度。每当列类用作非直接一行的孩子，填充被省略。

Answer 3

您应该让父母<div class="row">使用<div class="col-*>

类似这样的事情

<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>

Bootstrap行和列 - 我是否需要使用行？

3 个答案:

是的，您需要才能使用行。

“只有列可能是行的直接子项”

2021 年更新