Bootstrap 4 Сетка с накоплением по горизонтали
Пример сетки Bootstrap 4: с накоплением по горизонтали
Мы создадим базовую систему сетки, которая сначала будет складываться на очень маленьких устройствах, а затем станет горизонтальной на больших устройствах.
В следующем примере показан простой макет с двумя столбцами «стопкой по горизонтали», что означает, что он приведет к разделению 50%/50% на всех экранах, за исключением очень маленьких экранов, которые будут автоматически сложены (100%).
Пример: Сложенные по горизонтали
<div class="container">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Совет: числа в .col-sm-*классах указывают, сколько столбцов должен охватывать элемент div (из 12). Итак, .col-sm-1охватывает 1 столбец, .col-sm-4охватывает 4 столбца,
.col-sm-6охватывает 6 столбцов и т. д.
Примечание.
Убедитесь, что сумма составляет 12 или меньше (не обязательно использовать все 12 доступных столбцов):
Совет. Вы можете превратить любой макет фиксированной ширины в макет полной ширины , изменив .containerкласс на .container-fluid:
Пример: емкость для жидкости
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Колонки автоматического макета
В Bootstrap 4 есть простой способ создать столбцы одинаковой ширины для всех устройств: просто удалите номер и используйте класс только для указанного количества
элементов столбца . Bootstrap распознает количество столбцов, и каждый столбец будет иметь одинаковую ширину. Классы размера определяют, когда столбцы должны реагировать:.col-size-*.col-size
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>