100

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

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

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

4

1 回答 1

105

发行说明告诉你：（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/ )

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

于 2013-09-17T19:55:05.650 回答