29

如果我的浏览器大小为 992px 宽，那么 .container 的最大宽度为 970px。如果我的浏览器大小为 991px 宽，那么 .container 的最大宽度为 750px。为什么最大宽度会有这么大的跳跃？为什么不将最大宽度设置为 1170px 左右，每边留出 20px 的边距或其他东西，以便在调整浏览器窗口大小时容器宽度平滑缩放而不是大幅跳跃？

例如，在 992 像素的屏幕宽度上，我每边只有很少的边距（11 像素）。然而，在 991 像素宽的情况下，我在每一侧都有 120 像素的边距，这意味着几乎 25% 的屏幕空间是两侧的空白边距。这对我来说没有多大意义。这样做是有原因的吗？我可以在不破坏事物的情况下消除这种偏好某些容器宽度的行为吗？

4

4 回答 4

34

来自 Bootstrap 的官方回答：

归结为，为特定断点设计（在我看来）比为无限的、未知的大小设计更容易。您提到的替代方案没有错或坏，只是不同。我宁愿我们保持具有非常特定范围的层级

于 2013-10-17T23:14:03.787 回答
2

这是因为固定宽度 + 边距 = 断点。在引导程序中，边距增加，而容器保持固定宽度。当浏览器调整大小超过断点时，容器会在断点下方跳转。

于 2014-03-19T02:47:48.003 回答
2

这就是 Bootstrap 及其网格的工作方式。Bootstrap 定义了 4 个网格，请参见此表。根据屏幕尺寸，将使用这四个网格之一。992px 屏幕宽度是中小网格之间的断点。

正如我们习惯的那样，网格水平适合并垂直滚动。出于这个原因，较小的网格将应用于 992 像素以下。

最大容器宽度可以通过找出哪个宽度可以包含 12 个等宽列加上任何装订线来“计算”。对于小网格，12 x 60 等于 720。填充由列两侧的 15 个像素构成，网格外侧为负 2 x 15 个像素。那些缺失的像素（以负边距构造）为 720 + (2 x 15) = 750。

与您提到的 991 像素相比，750 像素似乎很小。小网格适用于屏幕宽度为 768 像素的设备，中等网格适用于屏幕宽度为 992 像素的设备。

于 2013-10-16T19:14:04.893 回答
2

我用了

.container {
    max-width: 100%;
}

在 Bootstrap 4 中，这为我删除了它。不过要小心在全球范围内应用它。您可以改为对特定容器执行此操作：

.container.some-specific-class {
    max-width: 100%;
}

<div class="container some-specific-class">
  xyz...
</div>

感谢 Dorian 最初的提示。

于 2018-04-07T08:20:53.793 回答