如何在引导程序中为不同设备计算容器宽度答案

【问题标题】：How container width is calculated in bootstrap for different devices如何在引导程序中为不同设备计算容器宽度
【发布时间】：2015-06-01 10:20:08
【问题描述】：

我刚开始使用 Bootstrap 并浏览文档。眼下，似乎很迷茫，有一些疑问如下：

在Grid Options 表中，为什么容器宽度总是小于设备宽度，为什么不等于设备宽度，例如小型设备平板电脑（≥768px）。
宽度 750px 是如何确定的，为什么不是 743px 或 755px 或任何其他尺寸。他们是如何确定 750px 作为容器宽度的。
如给定的那样，bootstrap 最多可扩展到 12 列，列之间有间距，每个列的宽度为〜62px和gutter是30px（每边15px）因此 (12(cols)*62px ) + (11(gutters) * 15(width)) 等于 909px 而不是给定的 750px 容器宽度。为什么？

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

谢谢 dk

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

首先，如果您希望容器等于设备宽度，请使用

container-fluid instead of container

对于网格系统有两个概念

在 bootstarp 中，网格中的每件事都没有像素，仅以百分比 (%) 表示。所有媒体查询断点都是通过 bootstartp 自行设置的，您可以通过引导定制器 http://getbootstrap.com/customize/ 更改这些值。

【讨论】：