Bootstrap .row 类正确用法答案

【问题标题】：Bootstrap .row class correct usageBootstrap .row 类正确用法
【发布时间】：2015-07-23 22:06:24
【问题描述】：

我已经使用 Bootstrap 4 个月了，但我仍然不太确定。

行类的正确用法是什么？举两个例子

第一个例子：每行只包含 12 列

<div class="container">
  <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
  </div>
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>
</div>

第二个例子：每一行基本类似于容器类，只是去掉了左右填充。如您所见，这一行等于 24 列，因此无论如何它都会创建 2 行，因为 12 是最大值。

<div class="container">
  <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>
</div>

【问题讨论】：

不要误解您使用第二种解决方案获得的输出。第一个是正确的。使用第二种解决方案最终会导致复杂页面出现问题。

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

使用默认的 Bootstrap 样式，行之间有空格 (margin-bottom)。如果您想要该空间，请使用row。如果您不想在 row 内的元素之间使用空格，则可以添加任意数量的 cols，它们会像您所看到的那样换行。

列换行绝对是 Bootstrap 的一个特性；这使响应式布局成为可能。

最后，如果您的 row 少于 12 列，并且您希望下一个元素始终位于另一行，您可以使用 row 强制“硬换行”。

【讨论】：

【解决方案2】：

你想太多了。行类最多只能处理 12 列。第二个是技术上不正确的使用。第一种方式是你应该实现row的方式。

编辑：

在文档中看到包装后，我会说引导框架是为了适应这一点，因为太宽的列已经被包装了，但最好还是尽量保持在 12 列。如果你需要，你可以使用更多。这取决于您作为开发人员需要什么。

（让我的评论成为答案，因为它更合适）

【讨论】：

问题是列换行实际上在官方文档getbootstrap.com/css/#grid-example-wrapping中并没有标记为错误使用，所以有点迷失方向
嗯，原来如此。我会说在这种情况下，引导框架是为了适应这种情况，因为太宽的列已经被包装了，但最好还是尽量保持在 12 列。如果你需要，你可以使用更多。