为什么 Bootstrap 3切换到盒子大小: 边框？

我正在将我的 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 将所有元素的框大小切换为边框大小吗？我怀疑这与新的网格系统是基于百分比的有关，但是上面的选择器显然不仅仅适用于网格元素。

似乎有点激进: -)

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

60180 次浏览
小开
最佳答案

The release notes tell you: (http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/)

Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system.

Personally I think most benefits go to the grid system. In Twitter's Bootstrap all grids are fluid. Columns are defined as percentage of the total width. But the gutter have a fixed width in pixels. By default a padding of 15px on both side of the column. The combination of width in pixels and percentage could be complex. With border-box this calculating is easy because the border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. (http://css-tricks.com/box-sizing/)

Also read: http://www.paulirish.com/2012/box-sizing-border-box-ftw/


提交答案