Почему Bootstrap 3 перешел на box-sizing: border-box?

98

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

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

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

css twitter-bootstrap twitter-bootstrap-3 boxsizer Александр Рехштайнер
источник
11
Спасибо за фрагмент CSS; это именно то, что я искал, чтобы применить это к проекту без начальной загрузки. :)
berto
Кто-нибудь знает, зачем нужны *: before и *: after?
limscoder
2
@limscoder *:beforeи *:afterнеобходимы также применить эту модель коробки к :beforeи :afterпсевдо-элементам.
buschtoens
1
Селектор * затрудняет разработчикам использование поля содержимого или поля заполнения где-либо еще в CSS. Лучший html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
способ

Ответы:

102

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

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

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

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

Басс Джобсен
источник
56
Простой пример: попробуйте поместить границу в 1 пиксель на div шириной 100% с content-box. Теперь у вас есть что-то, что составляет 100% + 2 пикселя. У border-boxвас нет этой проблемы, все равно 100%.
emptywalls
1
Хорошее дополнительное обсуждение и обоснование этого в этом номере .
yuvilio
1
Также стоит отметить, что передовая практика реализации размера коробки была обновлена, чтобы не мешать сторонним библиотекам. Я не уверен, планирует ли Bootstrap обновление, но они должны: css-tricks.com/…
jbyrd
2
Лично я никогда не менял коробочную модель со времен IE6. Это было ЕДИНСТВЕННОЕ, что IE знал лучше. И да, сегодня у вас есть calc (), чтобы обойти эти 100% плюс 2 пиксельные проблемы, но путь самурая ВСЕГДА был рамкой с ее рамкой и заполнением. Так человеческий мозг представляет себе коробку. Я люблю видеть эту «новую тенденцию», я приготовил им приветственный напиток.
dkellner