Почему Bootstrap 3 переключился на box-size: border-box?

Question

Почему Bootstrap 3 переключился на box-size: border-box?

89

Я переношу темы 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: -)

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

Alexander Rechsteiner 17 сен. 2013, в 14:47

Источник

8

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

Кто-нибудь знает, зачем нужны *: before и *: after?
limscoder 21 нояб. 2014, в 23:06
2

@limscoder The *:before того и *:after того, как необходимо также применить эту модель коробки к :before того и :after псевдо-элементов.
buschtoens 07 дек. 2014, в 08:55
1

Селектор * затрудняет разработчикам использование поля содержимого или поля заполнения в другом месте CSS. Рекомендуется при запуске нового проекта с нуля использовать html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
Jarek Przygódzki 13 сен. 2016, в 07:35

Показать ещё 2 комментария

Теги:

twitter-bootstrap

css

twitter-bootstrap-3

boxsizer

1 ответ

Ещё вопросы

Спасибо за фрагмент CSS; это именно то, что я искал, чтобы применить это к проекту без начальной загрузки. :)
Кто-нибудь знает, зачем нужны *: before и *: after?
@limscoder The *:before того и *:after того, как необходимо также применить эту модель коробки к :before того и :after псевдо-элементов.
Селектор * затрудняет разработчикам использование поля содержимого или поля заполнения в другом месте CSS. Рекомендуется при запуске нового проекта с нуля использовать html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

Bass Jobsen · Accepted Answer · 2013-09-17T19-58-00.000Z

В примечаниях к выпуску сообщается: (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/

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