Сетки
- Сетка внутри контейнера, относительно ширины которого рассчитываются размеры колонок.
- Для строки - класс row, для столбца - класс col.
- По документации в строке может быть до 12 ячеек, но если их больше, и текст внутри короткий - визуально в строку помещается больше столбцов.
- Визуально внутри row может быть несколько строк при превышении 12.
- Одна строка всегда находится под другой.
Минимальный пример сетки:
<div class="container">
<div class="row">
<div class="col">
Колонка
</div>
<div class="col">
Колонка
</div>
<div class="col">
Колонка
</div>
</div>
</div>
- Модификаторы относительно размера окна, контрольные точки аналогичные контрольным точкам для сетки.
- Для контрольной точки может быть дополнительный параметр - кол-во занимаемых ячеек. Например col-md-6.
- Поведение: до размера окна, указанного в контрольной точке ширина 12, после - в соответствии с цифрой. Но за счет комбинации классов можно сделать, чтобы например на большом было 4 столбца один за одним, меньше - 2 и 2, еще меньше - 1,1,1,1
<div class="row">
<div class="col-md-6 col-xl-3">one</div>
<div class="col-md-6 col-xl-3">two</div>
<div class="col-md-6 col-xl-3">three</div>
<div class="col-md-6 col-xl-3">four</div>
</div>
- Вместо цифры может быть -auto в этом случае ширина зависит от контента
- Может быть без контрольной точки
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
- Может быть без доп. параметра, но тогда должен быть предшествующий с полным набором параметров
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
- В этом случае берется предыдущее распределение и применяется к неуказанному
За счет применения класса row-cols-* у div row фиксируется визуальное количество столбцов в одной строке (по-моему это повтор функционала). Хотя поведение данного класса несколько неясно: для такой настройки
<div class="row row-cols-4">
<div class="col">Колонка</div>
<div class="col">Колонка</div>
<div class="col-6">Колонка</div>
<div class="col">Колонка</div>
</div>
последняя колонка будет визуально на следующей строке, что странно. Установленное количество строк фиксируется для всех размеров. Однако реальное назначение данного функционал несколько непонятно.
Строки могут быть вложенными.
No comments to display
No comments to display