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

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中插入一个新的(和嵌套的...假设)行,然后在该行中插入另外两个col？

Answer 1

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

是的,你需要使用行.

更新2018年

在Bootstrap 3和4中的row> 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>

正如你在这里看到的,你应该总是使用row.这在Bootstrap 4中非常重要,因为如果列不放在a中 ,列将只是垂直堆叠(换行).在具有在任一侧15像素的负余量,因此好处是...row.row

• 里面100%宽度的内容 container
• 将内容分成行(强制cols在线)
• 嵌套网格行> col并保持外侧对齐

来自Bootstrap 3 Docs ......

内容应放在列中,只有列可以是行的直接子项.

来自Bootstrap 4 Docs ......

行是列的包装器.每列都有水平填充(称为装订线),用于控制它们之间的空间.然后在具有负边距的行上抵消该填充.这样,列中的所有内容都在左侧可视化对齐...内容必须放在列中,只有列可能是行的直接子项.

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

Answer 2

2021 年更新

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

.col-* 类也可以在 .row 外部使用，以赋予元素特定的宽度。每当列类用作行的非直接子级时，都会省略填充。