为什么Bootstrap 3切换到box-sizing：border-box？ [英] Why did Bootstrap 3 switch to box-sizing: border-box?

问题描述

我将我的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-框？我怀疑它与新的网格系统是基于百分比，但上面的选择器不仅适用于网格元素明显。
 
 
 
看起来有点激进的imho 
解决方案
任何人都可以提供一些洞察力。版本说明告诉您：（ http://blog.getbootstrap.com/2013/08/ 19 / bootstrap-3-released / ）
 
 
默认更好的框模型。 Bootstrap中的所有内容都获得了box-sizing：border-box，使得更容易调整大小的选项和
增强的网格系统。
 
 
个人我认为最多的利润是网格。在Twitter的Bootstrap中，所有网格都是流动的。列定义为总数的百分比。但是沟槽具有以像素为单位的固定宽度。默认情况下，列的两侧为15像素的填充。宽度（以像素为单位）和百分比的组合可能很复杂。在边框框中，这个计算是容易的原因：border-box值（与内容框默认值相反）使最终渲染框是声明的宽度，以及在框内切割的任何边框和内边距（http://css-tricks.com/box-sizing/ ）
 
 
 
另请参阅： http://www.paulirish.com/2012/box-sizing-border -box-ftw /  
 
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;
}
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?
解决方案
The release notes tell you: (http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/)

  
Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an
  enhanced grid system.
Personal i think most profits are for the grid(s). In Twitter's Bootstrap all grid are fluid. Columns are defined as percentage of the total. But the gutter have a fixed width in pixels. By default an padding of 15px on both side of the column. The combination of width in pixels and percentage could be complex. In the border-box this calculating is easy cause: 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/)

Also read: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

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