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，而不是12。

然而，这似乎无关紧要，它在每个断点都能完美地工作。

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

Answer 1

不，并没有强制要求bootstrap grid必须添加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;
}

结果如下：(Demo in Fiddle)

​

​

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

结果如下：(Demo in Fiddle)

​

​

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

Answer 2

4 * col-md-6将在一个中等屏幕上创建两个“行”。由于您将所有内容包装在一个.row中，因此它将按预期运行。如果你把它去掉了，那么它们就会彼此嵌套在一起

例如：

<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%。列宽由col1-**-(number/ 12)指定为百分比(2/12 = 0.166667)

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

将产生1行和2列，每列的宽度是父对象的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%宽)

Answer 3

我最近看到很多网站使用“col 12colmd-10colmd-offset-1”。偏移量使内容居中，但每行只填充了11个cols。如果下一个元素是col-1，那么它也必须包含of offset-1 (强制总共13个元素，将偏移量为-1的col-1移动到下一行，很好地对齐)。如果下一个元素更宽，它仍然需要偏移量(跳过第一列)。

在CSS方面，它都与百分比一起工作。如果列的总宽度超过100%，则必须在新行上强制下一个元素。通过制作一个包含大量div的html文件，你可以很容易地理解这个概念。将以下css添加到div (bootstrap基础)

body > div {
    margin: 0;
    padding: 0;
    float: left;
    width: 8.333333% (or 1/12th)
}

然后你可以改变独立div的大小，看看会发生什么。使用四舍五入值可能更容易(例如，10%/20%)，这里就是bootstrap。希望这篇文章能让你理解浏览器是如何处理引导网格的(你刚刚制作了一个基本版本)

有关列包装的Bootstrap文档也提供了一个很好的例子。