Bootstrap 3网格，确实*无论连续多少列？

Question

我有一个表单布局，上面有bootstrap 3表单组。我希望这些表单组在＆lt;平板电脑尺寸小，2列，大屏幕上4列。

我显然工作得很完美，但是在这里做了一些阅读之后，我所做的似乎违反了所谓的规则，即连续的每一列必须加起来为12个。但是我能找到的每个教程和文档总是使用像狡猾的词一样＆＃34;应该＆＃34;或者＆＃34;理想情况下＆＃34;当它说它应该加起来为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加起来不超过12个。

然而，这似乎并不重要，并且它在每个断点都能正常工作。

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

Answer 1

不，没有任何要求bootstrap grid 必须最多添加12列。 这只是一种偏好/风格的东西。

少于12列 - ＆gt;左对齐：

如果填充的列数少于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;
}

结果如下：（Demo in Fiddle）

超过12列 - ＆gt;包裹物：

如果总数增加到超过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>

结果如下：（Demo in Fiddle）

除此之外，有时候12列布局看起来更好，但你没有 来使用它们;它不是数独：）

Answer 2

4 * col-md-6将在中等屏幕上创建2个“行”。由于您将所有内容包装在.row中，因此它将按预期运行。如果你删除它，那么事情将彼此相邻嵌套

e.g。

<div class="row">
  <div class="col-sm-2">Hello</div>
</div>
<div class="row">
  <div class="col-sm-2">Hello</div>
</div>

将生成2行，每行1列，每行16.67％，与父行一样宽，并向左浮动，因为行的宽度为100％。列宽由col - ** - （数字/ 12）指定为百分比（2/12 = 0.166667）

<div class="col-sm-2">Hello</div>
<div class="col-sm-2">Hello</div>

将生成包含2列的1行，每列的宽度为父对象的16.667％。所以你可以放弃.row，如果你做了

<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>

这将创建：小屏幕（4行全宽列）中屏幕（2行2列，每列50％宽度）大屏幕（1行4列，每列25％宽度）