Несколько CSS классов, которые изменяют одни и те же атрибуты

Question

Я продолжаю видеть div на наших HTML страницах с несколькими (bootstrap) CSS классами, которые, кажется, делают одно и то же:
<div class="col-md-10 col-sm-9">

Вот что показывают инструменты разработчика: применяется с классами:

Это происходит повсеместно, так что в качестве проверки работоспособности, есть ли когда-нибудь причина иметь несколько классов col-x? col-sm-9 перезаписывается, поэтому это похоже на серьезную оплошность.

Answer 1

Эти классы определяют ширину столбцов в зависимости от размера экрана зрителя. Sm - это маленькие или мобильные экраны, md - это экраны среднего или планшетного размера, lg - большие или настольные. В то время как мобильные, планшетные и настольные компьютеры не имеют универсально определенных размеров экрана, sm, md и lg охватывают эти общие области. Эта страница в документации Bootstraps объясняет систему сетки и дает вам официальные контрольные точки этих размеров экрана, https://getbootstrap.com/docs/4.4/layout/grid/.