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自定义Bootstrap网格,可以使用这样的嵌套.

16列网格:http://www.bootply.com/118737

24列网格:http://www.bootply.com/118739

Answer 2

您可以使用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 3

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

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

你是对的。您受到最大宽度的限制，并且您的列的宽度必须加起来等于最大宽度并且不能超过它。但是，您不会被迫在您的网站上保留该政策。

您始终可以覆盖 CSS 并根据需要自定义列宽！

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

让我们看看你想要什么：

如果我希望菜单为 300 像素，则不能使用网格。

您实际上可以在一定程度上仍然使用网格的同时做到这一点。我们只需要将菜单设置为 300 像素（如您所问）并为主要内容提供其余空间（1030 像素 - 300 像素 = 730 像素）。

所以我们需要一个 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 -->

基本上，您可以将布局比例更改为您想要的任何内容。总宽度只需要与网站的其余部分相匹配。我希望这有帮助。

-多米尼克