【问题标题】：Bootstrap 3 grid, does it *really* matter how many columns are in a row?Bootstrap 3 网格，它 * 真的 * 重要的是一行中有多少列？
【发布时间】：2014-06-23 12:25:52
【问题描述】：

我有一个表单布局，上面有引导 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 复制所有这些控件一次？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 grid-layout

【解决方案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 列布局看起来更好，但您没有必须使用它们；这不是数独 :)

【讨论】：

感谢您的精彩解释。许多人错误地认为每行有超过 12 个列单元是有问题的。

【解决方案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>

将生成 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% 宽度）

【讨论】：

如果列块的高度不同，则换行会变得混乱。
@Bailey 我的回答更针对 OP 所述的 12 个问题的规则以及它们如何工作。不一定是控制定义行的视觉方面的答案。

【解决方案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（引导基础）

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

然后你可以改变个别 div 的大小，看看会发生什么。使用圆形值（例如 10%/20%）可能更容易，只是在这里坚持引导。希望这能让您了解浏览器如何处理引导网格（您刚刚制作了一个基本版本）

关于列环绕的 Bootstrap 文档也给出了一个很好的例子。

【讨论】：