Html 为什么引导程序最多只有12列的类？为什么不更多？

为什么我只限于12列？为什么默认情况下不更灵活

让我解释一下什么使我困惑。假设我想创建一个简单的页面，左边有菜单，右边有内容

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

左菜单
内容
左菜单
内容

如上面的示例所示，对于菜单，sm-3和sm-4之间的差异几乎为100px！如果我希望菜单是300px，我不能使用网格。如果我有更多的专栏，我可以更精确

---

我是不是用错了电网系统？为什么网格划分为这么少的列？

大多数版本的引导仅使用12列来说明以下内容：

• 更轻松的布局创建
• 移动设备的响应式布局
• 成比例的“块”保持一切对称
• 更简单的“用户友好”主题

你说得对。您被限制为最大宽度，列的宽度加起来必须达到最大宽度，并且不能超过最大宽度。但是，您不必在您的网站上保留该政策

您可以随时覆盖CSS并根据需要自定义列宽

要做到这一点（并尊重网站的最大宽度），首先需要找到最大列的像素数，即col-12。您可以看到，您的网站的最大可能宽度为1030px

让我们看看你想要什么：

如果我希望菜单是300px，我不能使用网格

实际上，您可以在一定程度上仍然使用网格的情况下执行此操作。我们只需要将菜单设置为300px（如您所要求的），并为主要内容提供剩余空间（1030px-300px=730px）

所以我们需要一个300px的盒子和一个730px的盒子

以下是您可以使用的：

<div class="col-sm-3" style="width:300px;">Left menu</div> <!-- 300px -->
<div class="col-sm-9" style="width:730px;">Content</div> <!-- 730px -->

左菜单
内容

基本上，您可以根据需要更改布局比例。总宽度只需要匹配网站的其余部分。我希望这有帮助

---

-Dominick

您可以用更少的资源编辑列的数量

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列=6（1x12、2x6、3x4、4x3、6x2、12x1）

这是一个有趣的问题，我相信它永远不会有一个明确的答案（没有大量的调查），因为显然它不在任何官方文件中

我发现的大多数理由实际上都是事后证明/事后支持

也许有人只是凭直觉认为这是一个很好的违约，因为低于这个数字可能感觉太少，太多，而数字12基本上是每个人都非常熟悉的（12个月，中午前12小时，中午后12小时……等等）

---

就我所见，使用12可能是一个潜意识的决定，因为它看起来是一个任意的值，它会是12吗“一英尺？

原因很简单，因为它可以被

1

，

2

，

3

，

4

，

6

和

12

划分。这也很容易计算和完成布局

通过将

col-12

用于一个

div

或

元素，可以使用整个可用空间

或者使用
col-6
类将相同的空格划分为两个
equal
div

或者，您可以使用
col-4
类使
三个
相等
div

或者使用
col-3
类具有
4列

甚至可以使用
col-2
类创建
6列

甚至通过使用
col-1
类拥有
12列
布局

你看到了吗？操纵和计算你想要的空间是多么容易

更不用说还有其他
grid
系统，如
8
和
16
系统，但每种系统都有各自的优缺点。但从我自己的角度来看，我认为
12
列的网格是最灵活的，因为您可以拥有
3
equal
div
，这在我看来是一个巨大的优势。
您可以设置任意数量的列。记住，使用Bootstrap，您还可以嵌套列，这可能会给您带来更大的灵活性。如果我像您建议的样式那样添加样式属性=宽度：300px；，然后在小屏幕上显示（X列），宽度仍然是300px，但它应该是屏幕的全宽，因为我们指定了列sm。这没那么容易，对吗？第二，为什么12列比24列布局更容易响应，例如24列布局？24可以除以2，3，4，6…并且我可以更接近我想要的宽度，因为我有更多的列。为什么默认为12？如果你想让一切都成比例（即使在手机上）您可以使用百分比而不是指定300px。因此，我想说，对于左侧菜单，将其设置为30%，对于主要内容，将其设置为70%。12列布局是Bootstrap开发其布局技术的方式。它更有效，因为布局的大小仅与页面正文一样大，而缩小为几个字。对于任何较小的（如设计）或较大的（如背景）都可以用CSS或Javascript编写。如果一行中的总列数超过12行，则可以。问题是“为什么默认列数不多？”，而不是“为什么默认列数不少？”？“。因此，尽管这是一个很好的论点，说明为什么12而不是8，但它并不能真正回答为什么你会停在12而不是24或100。我认为这回答了这个问题-12是一个很好的数字，可以快速计算，同时提供了很好的组合数。”。如果你试着使用更大的数字，比如说14或16作为列的基数，你会很快意识到它不能像12那么容易地被划分。“为什么默认值不更多？”答案回到12列的网格上——因为有12个网格你就可以