14
4

4 回答 4

23

引导行和列 - 我需要使用行吗？

是的，您需要使用行。

2018 年更新

row>col关系在Bootstrap 3 和 4中是相同的。

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

因此，嵌套列 ( .col-*)也必须在 a内.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中非常重要，因为如果列没有放在 . 两边都有 15px 的负边距，所以好处是...row.row

  • 100% 宽度内容container
  • 将内容分成几行（强制列在线）
  • 嵌套网格 row>col 并在外侧保持对齐

从Bootstrap 3 文档...

内容应该放在列中，并且只有列可以是行的直接子级。

从Bootstrap 4 文档...

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

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

于 2014-02-26T21:10:47.160 回答
9

2021 更新

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

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

于 2021-01-18T06:15:40.010 回答
2

你应该有父母<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>
于 2014-02-26T21:11:05.067 回答
1

始终使用以下模式：

<div class="container">
   <div class="row">
      <div class="col-md-6">
        <div class="row">
          <div class="col-md-6"> some content </div>
          <div class="col-md-6"> another content </div>
        </div>
      </div>
   </div>
</div>

始终在 col 和容器类中使用 row 类，永远不要在 col 类中使用 col 并且永远不要在容器类中直接使用 col 类

于 2022-01-07T10:23:09.157 回答