twitter-bootstrap Bootstrap - 为什么只有 12 列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22168820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - why only 12 columns?
提问by Matthew
Why am I limited to 12 columns? Why isn't by default more, for more flexibility?
为什么我被限制为 12 列？为什么不默认更多，以获得更大的灵活性？
Let me explain what confuses me. Let's say I want to create a simple page with a left menu, and a content on the right.
让我解释一下让我困惑的地方。假设我想创建一个带有左侧菜单和右侧内容的简单页面。
<div class="col-sm-3">Left menu</div> <!-- 258px -->
<div class="col-sm-9">Content</div> <!-- 772px -->
<div class="col-sm-4">Left menu</div> <!-- 343px -->
<div class="col-sm-8">Content</div> <!-- 687px -->
As seen in this example above, the difference between sm-3 and sm-4 is almost 100px for the menu! If I want the menu to be 300px, I can't use the grid. If I had more columns, I could be more precise than that.
如上例所示，sm-3 和 sm-4 之间的菜单差异几乎为 100px！如果我希望菜单为 300 像素，则不能使用网格。如果我有更多的列，我可以比这更精确。
Am I using the grid system the wrong way? Why is the grid divided into so few columns?
我是否以错误的方式使用网格系统？为什么网格被分成这么少的列？
回答by Zim
If you don't want to customize the Bootstrap grid via LESS, you can use nesting like this..
如果您不想通过 LESS 自定义 Bootstrap 网格，则可以使用这样的嵌套..
16 column grid: http://www.bootply.com/118737
16 列网格：http: //www.bootply.com/118737
24 column grid: http://www.bootply.com/118739
24 列网格：http: //www.bootply.com/118739
回答by cire
You can edit the amount of columns with LESS.
您可以使用 LESS 编辑列数。
12 is the default because it is the most flexible grid pattern over any possible numbers up to 12.
12 是默认值，因为它是最多 12 的任何可能数字的最灵活的网格模式。
COLUMNS | EVEN COLUMNS POSSIBLE
1 column = 1 (1x1)
2 columns = 2 (1x2, 2x1)
3 columns = 2 (1x3, 3x1)
4 columns = 2 (1x4, 2x2, 4x1)
5 columns = 2 (1x5, 5x1)
6 columns = 4 (1x6, 2x3, 3x2, 6x1)
7 columns = 2 (1x7, 7x1)
8 columns = 4 (1x8, 2x4, 4x2, 8x1)
9 columns = 3 (1x9, 3x3 9x1)
10 columns = 4 (1x10, 2x5, 5x2, 10x1)
11 columns = 2 (1x11, 11x1)
12 columns = 6 (1x12, 2x6, 3x4, 4x3, 6x2, 12x1)
12 columns = 6 (1x12, 2x6, 3x4, 4x3, 6x2, 12x1)
回答by solutionhacker
Most versions of Bootstrap only use 12 columns to account for the following:
大多数版本的 Bootstrap 仅使用 12 列来说明以下内容：
- Easier layout creation
- Responsive layout for mobile devices
- Proportional "blocks" to keep everything symmetrical
- Simpler "User Friendly" theme
- 更轻松的布局创建
- 移动设备的响应式布局
- 比例“块”，以保持一切对称
- 更简单的“用户友好”主题
You are correct. You are limited to a maximum width, and the width of your columns must add up to the maximum width and cannot exceed it. However, you are not forced to keep that policy on your website.
你是对的。您受到最大宽度的限制，并且您的列的宽度必须加起来等于最大宽度并且不能超过它。但是，您不会被迫在您的网站上保留该政策。
You can always override the CSS and customize the column width to any way you want!
您始终可以覆盖 CSS 并根据需要自定义列宽！
To do this (and honor the maximum width of your website), you first need to find the number of pixels for the largest column, which is col-12. You can see that the maximum possible width is 1030px for your website.
为此（并尊重您网站的最大宽度），您首先需要找到最大列的像素数，即 col-12。您可以看到您网站的最大可能宽度为 1030 像素。
Let's look at what you wanted:
让我们看看你想要什么：
If I want the menu to be 300px, I can't use the grid.
如果我希望菜单为 300 像素，则不能使用网格。
You can actually do that while still using the grid to a certain extent. We just need to set the menu to be 300px (like you asked) and give the rest of the space (1030px - 300px = 730px) for the main content.
您实际上可以在一定程度上仍然使用网格的同时做到这一点。我们只需要将菜单设置为 300 像素（如您所问）并为主要内容提供其余空间（1030 像素 - 300 像素 = 730 像素）。
So we need a box for 300px and a box for 730px.
所以我们需要一个 300px 的框和一个 730px 的框。
Here's what you can use:
以下是您可以使用的内容：
<div class="col-sm-3" style="width:300px;">Left menu</div> <!-- 300px -->
<div class="col-sm-9" style="width:730px;">Content</div> <!-- 730px -->
Basically, you can change your layout proportions to anything you want. The total width just needs match the rest of the website. I hope that helps.
基本上，您可以将布局比例更改为您想要的任何内容。总宽度只需要与网站的其余部分相匹配。我希望这有帮助。
-Dominick
-多米尼克
回答by Aelios
Please have a look to https://github.com/Aelios/bootstrap-flexible-grid
请查看https://github.com/Aelios/bootstrap-flexible-grid
Which allows you to customize each Bootstrap row columns count.
这允许您自定义每个 Bootstrap 行列数。
回答by Oswaldo
This is an interesting question which I believe will never have a definitive answer (without a whole lot of investigation) as apparently it is not in any official doc.
这是一个有趣的问题，我相信它永远不会有明确的答案（没有大量调查），因为显然它不在任何官方文档中。
Most reasons I found are actually after the fact justifications / post hoc ergo propter hocIMHO.
我发现的大多数原因实际上是事后理由/事后 ergo propter hoc恕我直言。
Maybe someone just intuitively decided it was a good default, as less than that could feel too little, more too much, and the number 12 is very familiar to basically everyone (12 months, 12 hours before noon and 12 after... so on)
也许有人只是凭直觉认为这是一个很好的默认值，因为少于这个值会感觉太少，太多了，而且数字 12 基本上每个人都非常熟悉（12 个月，中午前 12 小时和中午后 12 小时......等等)
As far as I can see, it was probably a subconscious decision to use the duodecimal numeral system
据我所知，使用十二进制可能是潜意识的决定
