Ale*_*ner 97 css boxsizer twitter-bootstrap twitter-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将所有元素的盒子大小都切换到边框？我怀疑它与基于百分比的新网格系统有关,但上面的选择器显然不仅适用于网格元素.
似乎有点激进imho :-)
有人愿意提供一些见解吗？
Bas*_*sen 99
发行说明告诉你:(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/