引导网格系统：这段代码正确吗？答案

【问题标题】：Bootstrap grid system: is this code correct?引导网格系统：这段代码正确吗？
【发布时间】：2017-01-07 20:54:05
【问题描述】：

我想问一下，从 Bootstrap 的角度来看，这段代码是否正确？我希望答案是肯定的。问题是关于 row 和 col(s) 之间的附加标签。

<div class="row">
<something>
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</something>
</div>

附： <something> 没有 CSS 样式，这是来自 AngularJS 的指令。

【问题讨论】：

【解决方案1】：

这里没有错，但是使用引导程序有更好的做法。

只需注意负边距和 clearfix，检查样式是否正常。

顺便说一句，如果你需要为 angularJs 指令使用某个标记，你可以使用“注释指令”。

【讨论】：

【解决方案2】：

来自Bootstrap docs..

内容应该放在列中，并且只能列行的直接子代。

Bootstrap row 具有负边距以补偿列填充。 <something> 在您的示例中并没有特别引起问题，但从 Bootstrap 的角度来看它是不正确的。

【讨论】：

【解决方案3】：

在该代码中，something 标记将被简单地赋予row div 的整个 12 列宽度。只要东西标签上没有任何会干扰的东西，内部元素就会被分割成相关的网格。

我认为这应该可以正常工作，但作为旁注，我通常会这样写

<something>
<div class="row">
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</div>
</something>

这样，您可以选择在需要时轻松地将更多行等添加到something 部分，并且在我看来只是有助于提高可读性。

【讨论】：

【解决方案4】：

在这种情况下，row 基本上与col-md-12 具有相同的目的，但row 会给您左右两边的-15px 边距。为了避免水平滚动条，您可以将整个内容包装在一个带有 container 类的 div 中。

【讨论】：

【解决方案5】：

对我来说看起来不错，但我认为根据您的“某事”元素它可能会有所不同

【讨论】：