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

似乎有点激进的imho： - ）

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

Answer 1

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

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

我个人认为大多数好处都归功于网格系统。在Twitter的Bootstrap中，所有网格都是流畅的。列定义为总宽度的百分比。但是，排水沟的像素宽度固定。默认情况下，列的两侧填充为15px。像素宽度和百分比的组合可能很复杂。使用border-box这个计算很容易，因为border-box值（与内容框默认值相对）使最终呈现的框成为声明的宽度，并且框内的任何边框和填充都会被切割。（http://css-tricks.com/box-sizing/）

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

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

1 个答案: