CSS 为什么 Bootstrap 3 强制容器宽度为特定大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19393264/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does Bootstrap 3 force the container width to certain sizes?
提问by Ben McCann
If my browser is sized to be 992px wide, then .container has a max-width of 970px. If my browser is sized to be 991px wide, then .container has a max-width of 750px. Why is there this big jump in the max width? Why not just have a max-width of 1170px or so with 20px of margin on each side or something so that as you resize your browser window the container width scales smoothly instead of having a big jump?
如果我的浏览器的大小为 992px 宽，那么 .container 的最大宽度为 970px。如果我的浏览器的宽度为 991px，那么 .container 的最大宽度为 750px。为什么最大宽度有这么大的跳跃？为什么不让最大宽度为 1170px 左右，每边有 20px 的边距或其他东西，以便在调整浏览器窗口大小时容器宽度平滑缩放而不是大幅跳跃？
E.g. at 992px screen width I have only very little margin on each side (11px). Yet at 991px wide I have 120px of margin on each side, which means nearly 25% of the screen real estate is empty margin on the sides. This doesn't make a lot of sense to me. Is there a reason this was done? Can I remove this behavior of preferring certain container widths without breaking things?
例如，在 992px 屏幕宽度时，我每边只有很小的边距（11px）。然而，在 991px 宽时，我每边都有 120px 的边距，这意味着近 25% 的屏幕空间是边上的空白边距。这对我来说没有多大意义。这样做有什么原因吗？我可以在不破坏东西的情况下消除这种偏好某些容器宽度的行为吗？
回答by Ben McCann
The official answer from the Bootstrap folks:
Bootstrap 人员的官方回答：
What it boils down to is that designing for specific breakpoints is easier (in my mind) than designing for unlimited, unknown sizes. The alternative you mention isn't wrong or bad, just different. I'd rather us maintain the tiers with very specific ranges
归根结底，为特定断点设计比为无限、未知大小设计更容易（在我看来）。你提到的替代方案没有错也没有坏，只是不同。我宁愿我们保持非常特定范围的等级
回答by Bass Jobsen
This is how Bootstrap and its grids work. Bootstrap defines 4 grids, see this table. Depending on screen size, one of these four grids will be used. 992px screen width is the breakpoint between the small and the medium grid.
这就是 Bootstrap 及其网格的工作方式。Bootstrap 定义了 4 个网格，请参阅此表。根据屏幕尺寸，将使用这四个网格之一。992px 屏幕宽度是小格和中格之间的断点。
Grids fit horizontally and scroll vertically as we are used to. For this reason the smaller grid will be applied below 992px.
网格水平适合并垂直滚动，就像我们习惯的那样。因此，将在 992px 以下应用较小的网格。
The maximum container width can be "calculated" by finding which width can contain 12 equal-width columns plus any gutters. For the small grid 12 x 60 makes 720. The padding is constructedof 15 pixels on both sides of the column, minus 2 x 15 pixels on the outside of the grid. Those missing pixels (constructed with a negative margin) make 720 + (2 x 15) = 750.
最大容器宽度可以通过查找哪个宽度可以包含 12 个等宽列加上任何装订线来“计算”。对于小网格，12 x 60 等于 720。填充由列两侧的 15 个像素构成，网格外侧减去 2 x 15 个像素。那些缺失的像素（用负边距构建）使 720 + (2 x 15) = 750。
750 px seems very small in relation to the 991px your mentioned. The small grid is intended for use on devices with a screen width of 768px and the medium grid for screen widths of 992px.
750 像素与您提到的 991 像素相比似乎很小。小网格适用于屏幕宽度为 768 像素的设备，中网格适用于屏幕宽度为 992 像素的设备。
回答by c0d3fall
This is because fixed-width + margin = break point. In bootstrap the margin grows while the container remains at a fixed width. When the browser is res-sized past break-point the container jumps just below break-point.
这是因为固定宽度 + 边距 = 断点。在 bootstrap 中，边距会增加，而容器保持固定宽度。当浏览器调整大小超过断点时，容器会跳到断点下方。
回答by Dmitri R117
I used
我用了
.container {
max-width: 100%;
}
in Bootstrap 4, and that removed it for me. Be careful applying that globally though. You can do this for specific containers instead:
在 Bootstrap 4 中，这为我删除了它。不过在全球范围内应用时要小心。您可以为特定容器执行此操作：
.container.some-specific-class {
max-width: 100%;
}
<div class="container some-specific-class">
xyz...
</div>
Thanks to Dorian for the initial tip.
感谢 Dorian 最初的提示。
