Посмотреть все уроки курса
Выбрать другой урок из курса
Обсуждение
Теория урока

Адаптивные столбцы в Bootstrap

В предыдущем уроке мы создавали автоматические столбцы.

Но Bootstrap славится своей адаптивностью. Как же нам сделать адаптивные столбцы?

Bootstrap может адаптировать к шести контрольным точкам (брейкпоинт):

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

На рисунке 1 представлено определение сетки на контрольных точках.

Рисунок 1x
Рисунок 1x

К примеру, мы сделаем, чтобы на брейкпоинте 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 колонки таким способом:

  1. На разрешении xs – должны занимать по 12 столбцов. (автоматические колонки можно создать просто классом .col);
  2. На разрешении sm – должны занимать по 6 столбцов;
  3. На разрешении md - должны занимать по 4 столбцов;
  4. На разрешении lg - должны занимать по 12 столбцов;

Автор курса: Олег Данилюк (по всем вопросам)

<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.