我有一个表单布局，上面有 Bootstrap 3 表单组。我希望这些表单组在

我显然让它工作得很好，但是在这里阅读了一些内容后，我所做的似乎违反了假设的规则，即一行中的每一列加起来必须等于 12。但是我能找到的每个教程和文档总是使用诸如“应该”之类的狡猾的词或者“理想情况下”，当说加起来应该是 12 时。这里似乎没有明确的指导。

我这样定义我的组：

<div class="row">
    <div class="form-group col-md-6 col-lg-3" ><!--....etc-->

我目前每行有 4 个。这意味着 4 * col-lg-3 加起来为 12，但 4 * col-md-6 表单组 div 加起来为 24，而不是 12。

然而，这似乎并不重要，并且它在每个断点处都能完美运行。

我应该担心吗？这有什么关系吗？当然，我不应该为同一页面上的 col-md-6 和 col-lg-3 做两个完全不同的布局，分别复制所有这些控件一次？

不，没有什么可以强制要求引导网格 http://getbootstrap.com/css/#grid must最多添加 12 列。
这只是一种偏好/风格。

少于 12 列 -> 左对齐：

如果填充的列少于十二个，默认情况下它们将左对齐，在右侧留下空白空间。

下面的代码:

<div class='row'>
    <div class="col-xs-2">Hi</div>
    <div class="col-xs-2">Hi</div>
</div>

.row > div {
    background: lightgrey;
    border: 1px solid grey;
}

结果是这样的：（Fiddle 演示 http://jsfiddle.net/KyleMit/Gt25L/)

超过 12 列 -> 换行：

如果总数加起来超过 12 列，只要这些列在row类，它们只会换行到其他行。一个很好的用例是照片网格系统，您想要添加大量照片，但不知道您将拥有多少行，并且仍然想要定义列数。

下面的代码:

<div class='row'>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
</div>

结果是这样的：（Fiddle 演示 http://jsfiddle.net/KyleMit/vvWEJ/)

除此之外，有时 12 列布局看起来更好，但你不这样做have使用它们；这不是数独:)