css - 如何在不同设备的 Bootstrap 中计算容器宽度

Question

我刚开始使用 Bootstrap 并浏览文档。现在，看起来很困惑，有一些疑问如下:

1. 在Grid Options表格，为什么容器宽度总是小于设备宽度，为什么不等于设备宽度，例如小型设备平板电脑(≥768 像素)。

2. 宽度 750px 是如何确定的，为什么不是 743px 或 755px 或任何其他尺寸。他们是如何确定 750px 作为容器宽度的。

3. 如前所述，bootstrap 最多可扩展到 12 列，列之间有间距，每列宽度为~62px 和装订线是 30px(每边 15px)因此(12(cols)*62px ) + (11(gutters) * 15(width)) 等于 909px 而不是给定的 750px 容器宽度。为什么？

这一切让我很困惑。有人可以展示如何针对不同的断点计算容器宽度以及为什么容器宽度不等于设备宽度吗？

谢谢

Answer 1

Bootstrap .container 用作居中容器，如果你想在所有设备上使用全 Angular ，请使用 .container-fluid

62px在小断点处其实就是62.5px。 62.5 x 12 = 750px，这包括每列周围的 15px 填充。装订线位于列内，因为使用了填充(与装订线位于列外的边距相反)。

这是一个很好的视觉演示:http://www.codeply.com/go/Sul9kw8Kne

除了容器宽度，看看这个 article about the BS3 grid