Bootstrap 4 Grid Stacked-to-horizontal
Пример сетки Bootstrap 4: стек по горизонтали
Мы создадим базовую систему Grid, которая начнет складываться на дополнительных небольших устройствах, прежде чем стать горизонтальной на больших устройствах.
В следующем примере показан простой макет с двумя колонками с накоплением по горизонтали, что означает, что на всех экранах будет разбито 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 имеется простой способ создания столбцов с одинаковой шириной для всех устройств: просто удалите номер из .col-size-*
и используйте только .col-size
класс на указанное число элементов Col. Bootstrap будет распознать количество столбцов, и каждый столбец будет иметь одинаковую ширину. Классы 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>