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

Создаем столбцы в Bootstrap

Когда вы создаёте макет, вы как-то ограничиваете контент в нём, то есть создаёте container.

В Bootstrap он тоже есть, .container устанавливает max-width в каждой контрольной точке. Класс .container-fluid охватывает всю ширину вашего экрана.

После того как мы создали container, давайте зададим сетку.

Сетка создаётся при помощи классов .row и .col, в сеточной системе 12 столбцов.

(Примечание: без класса .row, использование класса .col невозможно)

Пример:

Пример
<div class="row">
<div class="col"> 1 колонка </div>
<div class="col"> 2 колонка </div>
<div class="col"> 3 колонка </div>
</div>

В примере выше, будет создана строка из 3 колонок, автоматически занимающая 12 столбцов, 1 колонка (4 столбца), т.е. 4 + 4 + 4 = 12.

Если вам нужно создать 4 колонки, и чтобы они занимали по 3 столбца, можно написать так, как в примере:

Пример
<div class="row">
<div class="col-3"> 1 колонка </div>
<div class="col-3"> 2 колонка </div>
<div class="col-3"> 3 колонка </div>
<div class="col-3"> 4 колонка </div>
</div>

Теперь сформируются 4 колонки по 3 столбца.

Не так уже и сложно, верно?

Задание:

Сделайте 4 колонки, которые будут занимать:

  • 1 колонка - 2 столбца;
  • 2 колонка - 4 столбца;
  • 3 колонка - 3 столбца;
  • 4 колонка - 3 столбца.

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

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