Bootstrap 3网格系统，一行中有多少列真的很重要吗？

Question

我有一个表单布局，其中包含 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合计为24而不是12。

然而，在每个断点处都能正常工作，所以似乎并不重要。

我应该担心吗？这会有影响吗？难道我需要在同一页上为col-md-6和col-lg-3做两个完全不同的布局，并分别复制这些控件吗？

- JohnC

Answer 1

不，没有任何规定必须将Bootstrap网格系统中的栏目总数加起来为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;
}

这里是结果: (在 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>

这是结果: (在 Fiddle 上进行演示)

除此之外，有时候使用12列布局会更好看，但你不必非得使用它们；这不是数独 :)

- KyleMit

---

谢谢您的精彩解释。很多人错误地认为每行超过12列单元格会出问题。 - Carol Skelly

Answer 2

4 * col-md-6 会在中等屏幕上创建2个“行”。由于您将所有内容都包装在.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％。列宽由col-**-（number/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%宽度）。

- engineersmnky

---

如果列块的高度不都相同，换行会变得混乱。 - le3th4x0rbot

@Bailey 我的回答更多地是针对OP所述的12个问题规则以及它们的工作方式，而不是控制定义行的视觉方面的答案。 - engineersmnky

Answer 3

最近我看到很多网站使用“col-xs-12 col-md-10 col-md-offset-1”。偏移可以使内容居中，但每行只填充了11列。如果下一个元素是col-1，则必须包括col-offset-1（强制总共13个，将带有offset-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网格（您刚刚制作了基本版本）

Bootstrap文档中的columnwrapping也提供了一个不错的示例。

- vandijkstef