为什么Bootstrap 3切换为box-sizing：border-box？

Question

我正在将Bootstrap主题从v2.3.2迁移到v3.0.0，我注意到的一件事是，由于bootstrap.css中的以下样式，许多尺寸的计算方式有所不同。

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

谁能解释为什么Bootstrap将所有元素的框大小切换为border-box？我怀疑这与基于百分比的新网格系统有关，但是上面的选择器显然不仅适用于网格元素。

似乎有点激进的恕我直言:-)

有人愿意提供一些见识吗？

Answer 1

默认情况下使用更好的盒子模型。Bootstrap中的所有内容都可以进行大小调整：边框调整，可以简化大小调整选项并增强网格系统。

我个人认为，大多数好处都归功于网格系统。在Twitter的Bootstrap中，所有网格都是不固定的。列定义为总宽度的百分比。但是装订线的像素宽度是固定的。默认情况下，列两边的填充为15px。以像素为单位的宽度和百分比的组合可能很复杂。进行border-box此计算很容易，因为该border- box值（与内容框默认值相反）使最终渲染的框成为声明的宽度，并且在框内剪切了任何边框和填充。