Как работает адаптивная сетка Bootstrap на разных устройствах?

Адаптивная сетка Bootstrap меняет своё поведение в зависимости от разрешения экрана. ucozmagazines.ru То, как разметили сетку, определяет, на каких устройствах ячейки будут отображаться в одной строке, а на каких — переноситься друг под друга. ucozmagazines.ru

По умолчанию сетка поддерживает шесть контрольных точек: getbootstrap.ru

1. Очень маленький — Extra small (xs). getbootstrap.ru
2. Маленький — Small (sm). getbootstrap.ru
3. Средний — Medium (md). getbootstrap.ru
4. Большой — Large (lg). getbootstrap.ru
5. Очень большой — Extra large (xl). getbootstrap.ru
6. Огромный — Extra extra large (xxl). getbootstrap.ru

Каждая из этих контрольных точек имеет собственный контейнер, уникальный префикс класса и модификаторы. getbootstrap.ru

Например, если указать класс col-lg-6, то такая ширина у блока будет только на экранах более 1200 пикселей. webformyself.com На md, sm, xs устройствах будет другая ширина. webformyself.com

Ширина адаптивных блоков задаётся в относительной форме по умолчанию с помощью числа от 1 до 12 (колонок Bootstrap). itchief.ru Это число определяет, какую часть ширины будет занимать адаптивный блок начиная с указанной контрольной точки от ширины родительского блока, то есть ряда. itchief.ru

Если сумма чисел в классе столбца превышает 12, то все дополнительные контейнеры помещаются на новую строку автоматически. ucozmagazines.ru