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

Question

我有一个表单布局,上面有bootstrap 3表单组.我希望这些表单组在单个列中的<小,平板电脑大小中断2列,大屏幕上4列.

我觉得它显然工作得很好,但是在这里做了一些阅读后我所做的似乎违反了所谓的规则,即连续的每一列必须加起来为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.

然而,这似乎并不重要,它在每个断点处都能很好地工作.

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

Answer 1

不,没有什么可以强制要求引导网格 必须添加12列.
这只是一种偏好/风格的东西.

少于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;
}

结果如下:( 小提琴演示)

超过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>

结果如下:( 小提琴演示)

除此之外,有时它是12个布局更好看的情况下,但你不具备使用它们; 它不是一个数独:)