为什么 Bootstrap 3 切换到 box-sizing: border-box?

问题描述

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

I'm migrating my Bootstrap themes from v2.3.2 to v3.0.0 and one thing I noticed is that a lot of dimensions are calculated differently, due to the following styles in bootstrap.css.

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

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

Can anyone explain why Bootstrap switches the box-sizing of all elements to border-box? I suspect it has to do with the new grid system being percent-based, but the selector above does not only apply to the grid elements obviously.

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

Seems a bit radical imho :-)

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

Anyone care to give some insight?

推荐答案

发行说明告诉你:(http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/)

默认情况下更好的盒子模型.Bootstrap 中的所有内容都采用 box-sizing:border-box，提供更简单的尺寸选项和增强的网格系统.

我个人认为网格系统的好处最多.在 Twitter 的 Bootstrap 中，所有网格都是流动的.列被定义为总宽度的百分比.但是装订线的宽度是固定的(以像素为单位).默认情况下，列两侧的内边距为 15px.像素宽度和百分比的组合可能很复杂.使用 border-box 这种计算很容易，因为 border-box 值(与 content-box 默认值相反)使最终渲染的框具有声明的宽度，并且任何边框并在盒子内切割填充物.(http://css-tricks.com/box-sizing/)

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/)

另请阅读:http://www.paulirish.com/2012/box-sizing-border-box-ftw/

这篇关于为什么 Bootstrap 3 切换到 box-sizing: border-box?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！