4.1. Адаптивные столбцы в Bootstrap
В предыдущем уроке мы создавали автоматические столбцы.
Но Bootstrap славится своей адаптивностью. Как же нам сделать адаптивные столбцы?
Bootstrap может адаптировать к шести контрольным точкам (брейкпоинт):
- Очень маленький - Extra small (xs);
- Маленький - Small (sm);
- Средний - Medium (md);
- Большой - Large (lg);
- Очень большой - Extra large (xl);
- Огромный - Extra extra large (xxl).
На рисунке 1 представлено определение сетки на контрольных точках.

К примеру, мы сделаем, чтобы на брейкпоинте md
было две колонки по шесть столбцов:
<div class="container">
<div class="row">
<div class="col-md-6"> 1 колонка </div>
<div class="col-md-6"> 2 колонка </div>
</div>
</div>
Получается, что с разрешения md
и выше у нас будет по две колонки и по шесть столбцов.
Но если разрешение будет ниже 768 px
, то колонки будут занимать всё доступное пространство. Разрешения строятся по принципу больше или равно.
Для 768 px
правила будут приниматься больше или равно этому значению, также и насчёт других разрешений.
Мы можем также комбинировать наши классы.
Пример:
<div class="container">
<div class="row">
<div class="col-md-3 col-xl-3"> 1 </div>
<div class="col-md-4 col-xl-3"> 2 </div>
<div class="col-md-3 col-xl-3"> 3 </div>
<div class="col-md-2 col-xl-3"> 4 </div>
</div>
</div>
В нашем примере мы видим, что колонки на разрешении 1200 px
и более выстроились по 3, а на разрешении меньше 1200 px
колонки будут занимать по 3, 4, 3 и 2 колонки соответственно.
Вот такими простыми способами мы можем манипулировать нашей сеткой.
Задание:
Сделайте 3 колонки таким способом:
- На разрешении
xs
– должны занимать по 12 столбцов. (автоматические колонки можно создать просто классом.col
); - На разрешении
sm
– должны занимать по 6 столбцов; - На разрешении
md
- должны занимать по 4 столбцов; - На разрешении
lg
- должны занимать по 12 столбцов;
Автор курса: Олег Данилюк (по всем вопросам)