在行外使用 twitter 引导列类是个好主意吗？答案

【问题标题】：Is using twitter bootstrap column classes outside rows a good idea?在行外使用 twitter 引导列类是个好主意吗？
【发布时间】：2017-02-21 14:42:24
【问题描述】：

我正在尝试改进我的项目的 HTML 结构，我发现了一些类似的东西：

<div class="full-sidebar">
   <div class="col-xs-12"></div>
</div>

“full-sidebar”是一个自定义类。
我一直想知道的是：这样做是个好主意吗？将列 div 连续包装会更好吗？只是感觉以目前的方式做的“错误”。

【问题讨论】：

【解决方案1】：

我知道至少有一个使用行的原因。

"cols-" 是浮动的，并且将它们包装成一行会在所有列之后添加一个清除。这可以防止后续内容可能与您的列重叠。此外，它还确保行的高度等于列内容的高度。如果不清除列的容器，则容器将不会在其自身高度中包含列。

请注意，“col-”仅在宽度大于 992 像素时浮动。因此，您只会遇到超出该限制的内容重叠问题。看到这个fiddle。

HTML:

<div class="norow">
   <div class="col-md-6"></div>
   <div class="col-md-6"></div>
</div>

CSS：

.row {
  border: 2px solid yellow;
}
.norow {
  border: 2px solid green;
}

.col-md-6 {
  height: 50px;
  border: 2px solid red;
}

另外，正如其他人所提到的，col padding 和 margin 被设计为与 row padding 和 margin 结合使用。

【讨论】：

【解决方案2】：

您应该始终将<div class="col-xs-12"></div> 包裹在<div class="row"></div> 中。

原因 1

这就是引导网格系统。我们使用引导程序使布局干净且响应迅速。 这样做不会造成任何伤害。

原因 2

如果您不在<div class="row"></div> 内换行，一旦您的布局变长，它将在不久的将来产生不必要的问题。您将无法跟踪您的布局。

所以，一般来说，如果您没有充分的理由不这样做，最好将其包裹在 <div class="row"></div> 中。

希望这会有所帮助！

【讨论】：

【解决方案3】：

实际上，在行外使用引导列类不是标准程序。它可能会扰乱列设计的布局。在引导 css 文件中，每个列类根据其用途分配了不同的宽度百分比。如果您在行类之外使用列类，它可能会形成与引导程序规定的实际布局不同或受到干扰的布局。所以这不是一个好习惯。

网格系统规则 w3Schools.com指定的一些Bootstrap网格系统规则

【讨论】：

【解决方案4】：

在行外使用 twitter 引导列类是个好主意吗？

没有。

引导程序col-* 只能在row 中使用。来自文档..

使用行来创建水平列组。

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

列通过填充创建排水沟（列内容之间的间隙）。该填充通过 .rows 上的负边距在第一列和最后一列的行中偏移。

【讨论】：