css - que - ¿Por qué Bootstrap 3 cambió al tamaño de la caja: border-box?

cajas de texto css

Question

Estoy migrando mis temas de Bootstrap desde v2.3.2 a v3.0.0 y una cosa que noté es que muchas dimensiones se calculan de manera diferente, debido a los siguientes estilos en bootstrap.css.

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

¿Alguien puede explicar por qué Bootstrap cambia el tamaño de la caja de todos los elementos a border-box? Sospecho que tiene que ver con que el nuevo sistema de grillas está basado en porcentajes, pero el selector anterior no solo se aplica a los elementos de la grilla, obviamente.

Parece un poco radical imho :-)

¿A alguien le importa dar alguna idea?

Answer 1

Las notas de la versión te dicen: ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

Mejor modelo de caja por defecto. Todo en Bootstrap obtiene el tamaño de la caja: border-box, lo que facilita las opciones de tamaño y un sistema de grilla mejorado.

Personalmente creo que la mayoría de los beneficios van al sistema de grillas. En Bootstrap de Twitter, todas las cuadrículas son fluidas. Las columnas se definen como porcentaje del ancho total. Pero el canal tiene un ancho fijo en píxeles. Por defecto, un relleno de 15px en ambos lados de la columna. La combinación de ancho en píxeles y porcentaje podría ser compleja. Con border-box este cálculo es fácil porque el valor del border-box (en oposición al valor predeterminado del cuadro de contenido) hace que el cuadro final sea el ancho declarado, y cualquier borde y relleno se corten dentro del cuadro. ( http://css-tricks.com/box-sizing/ )

Lea también: http://www.paulirish.com/2012/box-sizing-border-box-ftw/