为什么Bootstrap 3强制容器宽度达到一定的尺寸？

Question

如果我的浏览器大小为992px宽，那么.container的最大宽度为970px。如果我的浏览器大小为991px宽，那么.container的最大宽度为750px。为什么最大宽度有这么大的跳跃？为什么不是最大宽度为1170px左右，每边有20px的边距或某些东西，这样当您调整浏览器窗口大小时，容器宽度可以平滑地缩放而不是大跳跃？

E.g。在992px的屏幕宽度上，每边只有很小的余量（11px）。然而，在991px宽度的情况下，我每边都有120px的边距，这意味着近25％的屏幕空间都是空边。这对我来说没有多大意义。有没有理由这样做？我可以删除这种偏好某些容器宽度而不破坏东西的行为吗？

Answer 1

Bootstrap人员的官方回答：

  

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

Answer 2

这就是Bootstrap及其网格的工作原理。 Bootstrap定义了4个网格，请参阅this table。根据屏幕尺寸，将使用这四个网格中的一个。 992px的屏幕宽度是小网格和中网格之间的断点。

网格水平放置并垂直滚动as we are used to。因此，较小的网格将应用于992px以下。

可以通过查找哪个宽度可以包含12个等宽列加上任何装订线来“计算”最大容器宽度。对于小网格，12 x 60在列的两侧产生720. The padding is constructed 15像素，在网格外部减去2 x 15像素。那些缺失像素（用负边距构造）使720 +（2 x 15）= 750。

750 px相对于你提到的991px而言似乎非常小。小网格适用于屏幕宽度为768px的设备和屏幕宽度为992px的中等网格。

Answer 3

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

Answer 4

我用过

.container {
    max-width: 100%;
}

在Bootstrap 4中，并为我删除了它。但要小心应用全局。您可以为特定容器执行此操作：

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

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

感谢Dorian的最初提示。