我正在将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?我怀疑这与基于百分比的新网格系统有关,但是上面的选择器显然不仅适用于网格元素。
似乎有点激进的恕我直言:-)
有人愿意提供一些见识吗?
默认情况下使用更好的盒子模型。Bootstrap中的所有内容都可以进行大小调整:边框调整,可以简化大小调整选项并增强网格系统。
我个人认为,大多数好处都归功于网格系统。在Twitter的Bootstrap中,所有网格都是不固定的。列定义为总宽度的百分比。但是装订线的像素宽度是固定的。默认情况下,列两边的填充为15px。以像素为单位的宽度和百分比的组合可能很复杂。进行border-box此计算很容易,因为该border- box值(与内容框默认值相反)使最终渲染的框成为声明的宽度,并且在框内剪切了任何边框和填充。
border-box
border- box