3.1. Создаем столбцы в 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 столбца.
Автор курса: Олег Данилюк (по всем вопросам)