为什么Bootstrap只有12列的类？为什么不是更多呢？

Question

为什么我被限制在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，我不能使用网格。如果我有更多的专栏，我可以更精确。

我使用网格系统的方式是错误的吗？为什么网格被划分成这么少的列？

Answer 1

您可以使用LESS编辑列数。

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)

Answer 2

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

为移动devices

• Proportional提供更轻松的布局creation

• Responsive layout symmetrical

• Simpler
• 保持一切用户友好的主题

你是对的。您受到最大宽度的限制，列的宽度总和必须达到最大宽度，并且不能超过该宽度。但是，您不会被强制在您的网站上保留该策略。

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

Answer 3

原因很简单，因为它可以分为1、2、3、4、6和12。这也很容易计算和完成布局。

您可以通过对一个div或element使用col-12来使用整个可用空间

或者使用col-6类将相同的空间划分为等于divs的two

或者，您可以使用col-4类使three等于divs

或者通过使用col-3类获得4 columns

或者甚至是使用col-2类的6 columns

甚至可以通过使用col-1类来创建12 columns布局

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

更不用说还有其他的grid系统，比如8和16系统，但每种系统都有自己的优点和缺点。但从我自己的角度来看，我认为12列的网格是最灵活的，因为你可以拥有与divs相等的3，这在我看来是一个巨大的优势。