twitter-bootstrap Bootstrap 3 网格，一行中有多少列*真的*重要吗？

Bootstrap 3 grid, does it *really* matter how many columns are in a row?

提问by JohnC

I have a form layout that has bootstrap 3 form groups on it. I want these form groups in a single column on < small, 2 columns on tablet size break and 4 column on larger screens.

我有一个表单布局，上面有 bootstrap 3 表单组。我希望这些表单组在 < small 上的单列中，在平板电脑尺寸上有 2 列，在较大的屏幕上有 4 列。

I have it apparently working perfectly, however after doing some reading here what I did seems to violate the supposed rule that every column in a row must add up to 12. However every tutorial and docs I could find always use weasel words like "should" or "ideally" when saying it should add up to 12. There doesn't seem to be a clear guidance here.

我显然工作得很好，但是在这里阅读了一些内容之后，我所做的似乎违反了假设的规则，即一行中的每一列必须加起来为 12。但是，我能找到的每个教程和文档总是使用像“应该”这样的狡猾词或“理想情况下”说它应该加起来为 12。这里似乎没有明确的指导。

I defined my groups like this:

我这样定义我的组：

<div class="row">
    <div class="form-group col-md-6 col-lg-3" ><!--....etc-->

and I currently have 4 of these in each row. This means that the 4 * col-lg-3 adds up to 12 but the 4 * col-md-6 form group divs adds up to 24 not 12.

我目前每行有 4 个。这意味着 4 * col-lg-3 加起来是 12，但 4 * col-md-6 表单组 div 加起来是 24 而不是 12。

However this doesn't seem to matter and it works perfectly at each breakpoint.

然而，这似乎并不重要，它在每个断点都能完美运行。

Should I be concerned? Does it matter in any way? Surely I'm not supposed to do two completely different layouts that duplicate all these controls once each for col-md-6 and col-lg-3 on the same page?

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

回答by KyleMit

No, there's nothing to mandate that the bootstrap gridmustadd up to 12 columns.
It's just a preference / stylistic thing.

不，没有强制要求引导网格必须加起来最多 12 列。
这只是一种偏好/风格。

Less than 12 Columns -> Aligns Left:

少于 12 列 -> 左对齐：

If you have less than twelve of the columns filled, by default they will left align, leaving empty space to the right.

如果填充的列少于 12 列，默认情况下它们将左对齐，在右侧留下空白空间。

The following code:

以下代码：

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

Results in this: (Demo in Fiddle)

结果如下：（小提琴演示）

More than 12 Columns -> Wraps:

超过 12 列 -> 换行：

If the total adds to more than 12 columns, as long as the columns are within a rowclass, they will just wrap to additional rows. A good use case would be a photo grid system where you would like to add tons of photos but don't know how many rows you'll have and would still like to define the number of columns.

如果总数增加到超过 12 列，只要这些列在一个row类中，它们就会换行到其他行。一个很好的用例是照片网格系统，您想在其中添加大量照片但不知道您将拥有多少行并且仍想定义列数。

The following code:

以下代码：

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

Results in this: (Demo in Fiddle)

结果如下：（小提琴演示）

Other than that, sometimes it's the case that 12 column layouts look better, but you don't haveto use them; it's not a sudoku :)

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

回答by engineersmnky

4 * col-md-6will create 2 "rows" on a medium screen. Since you are wrapping everything in a .rowit will function as expected. If you removed that then things will nest next to each other

4 * col-md-6将在中等屏幕上创建 2 个“行”。由于您将所有内容都包装在 a 中，.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>

will produce 2 rows with 1 column each that are each 16.67% as wide as the parent row and floating left because a row has 100% width. Column widths are specified by col-**-(number/ 12) as a percentage (2/12 = 0.166667)

将产生 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>

will produce 1 row with 2 columns that are each 16.667% as wide as the parent object. So you could forgo the .rowif you did

将产生 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>

This will create: Small Screen ( 4 rows full width columns) Medium Screen( 2 rows 2 columns each 50% width) Large Screen ( 1 row 4 columns each 25% width)

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

回答by vandijkstef

I've seen a lot of website use "col-xs-12 col-md-10 col-md-offset-1" lately. The offset centers the content, yet each row is filled with just 11 cols. If the next element is a col-1 it must include col-offset-1 as well (Forcing a total of 13, moving the col-1 with offset-1 to the next row, aligning nicely). If the next element is wider, it still needs the offset (To skip the first column).

我最近看到很多网站都在使用“col-xs-12 col-md-10 col-md-offset-1”。偏移使内容居中，但每行仅填充 11 个列。如果下一个元素是 col-1，它也必须包括 col-offset-1（强制总共 13，将带有 offset-1 的 col-1 移动到下一行，很好地对齐）。如果下一个元素更宽，它仍然需要偏移量（跳过第一列）。

On the CSS side of it, it all works with percentages. If the total width of the columns is over 100% it has to force the next element on a new line. U can easily play with this concept by making a html file with a whole lot of divs. Add the following css to the divs (bootstrap basics)

在它的 CSS 方面，它都适用于百分比。如果列的总宽度超过 100%，则必须将下一个元素强制换行。你可以通过制作一个包含大量 div 的 html 文件轻松地使用这个概念。将以下 css 添加到 div（引导程序基础知识）

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

Then u can change the size of indivual divs to see what happens. It might be easier to play with round values (eg. 10%/20%), just sticked to bootstrap here. Hope this gives you an understanding of how the browser handles the bootstrap grid (which you just made a basic version of)

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

The Bootstrap docs on columnwrapping also give a nice example.

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