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

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

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

— Александр Рехштайнер
источник

Спасибо за фрагмент CSS; это именно то, что я искал, чтобы применить это к проекту без начальной загрузки. :)

— berto

Кто-нибудь знает, зачем нужны *: before и *: after?

— limscoder

@limscoder *:beforeи *:afterнеобходимы также применить эту модель коробки к :beforeи :afterпсевдо-элементам.

— buschtoens

Селектор * затрудняет разработчикам использование поля содержимого или поля заполнения где-либо еще в 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/

— Басс Джобсен
источник

Простой пример: попробуйте поместить границу в 1 пиксель на div шириной 100% с content-box. Теперь у вас есть что-то, что составляет 100% + 2 пикселя. У border-boxвас нет этой проблемы, все равно 100%.

— emptywalls

Хорошее дополнительное обсуждение и обоснование этого в этом номере .

— yuvilio

Также стоит отметить, что передовая практика реализации размера коробки была обновлена, чтобы не мешать сторонним библиотекам. Я не уверен, планирует ли Bootstrap обновление, но они должны: css-tricks.com/…

— jbyrd

Лично я никогда не менял коробочную модель со времен IE6. Это было ЕДИНСТВЕННОЕ, что IE знал лучше. И да, сегодня у вас есть calc (), чтобы обойти эти 100% плюс 2 пиксельные проблемы, но путь самурая ВСЕГДА был рамкой с ее рамкой и заполнением. Так человеческий мозг представляет себе коробку. Я люблю видеть эту «новую тенденцию», я приготовил им приветственный напиток.

— dkellner