Почему Bootstrap 3 переключился на размер коробки: 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 переключает размер всех элементов на прямоугольник? Я подозреваю, что это связано с тем, что новая сетевая система основана на процентах, но вышеперечисленный селектор не только применим к элементам сетки.

Кажется немного радикальным imho: -)

Кто-нибудь хочет дать некоторое представление?

Ответы

Ответ 1

В примечаниях к выпуску сообщается: (http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/)

По умолчанию лучше модель окна. Все в Bootstrap получает размер коробки: border-box, что упрощает выбор размеров и улучшенную систему сетки.

Лично я думаю, что большинство преимуществ идет в сетку. В Twitter Bootstrap все решетки являются текучими. Столбцы определяются как процент от общей ширины. Но желоб имеет фиксированную ширину в пикселях. По умолчанию добавляется 15px по обе стороны столбца. Комбинация ширины в пикселях и процентах может быть сложной. С border-box это вычисление легко, потому что значение border-box (в отличие от поля содержимого по умолчанию) делает конечный отображаемый ящик объявленной шириной, а любая граница и прокладка разрезаются внутри поля. (http://css-tricks.com/box-sizing/)

Также читайте: http://www.paulirish.com/2012/box-sizing-border-box-ftw/