Bootstrap 4 Сетка Маленькая
Пример небольшой сетки
Extra small | Small | Medium | Large | Extra Large | |
---|---|---|---|---|---|
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
Screen width | <576px | >=576px | >=768px | >=992px | >=1200px |
Предположим, у нас есть простой макет с двумя столбцами. Мы хотим, чтобы столбцы были разделены на 25%/75% для небольших устройств.
Маленькие устройства определяются как имеющие ширину экрана от 576 до 767 пикселей .
Для небольших устройств мы будем использовать .col-sm-*
классы.
Мы добавим следующие классы к нашим двум столбцам:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Теперь Bootstrap скажет: «При небольшом размере ищите классы с -sm- и используйте их».
Следующий пример приведет к разделению 25%/75% на малых (и средних, больших и очень больших) устройствах. На очень маленьких устройствах он будет автоматически складываться (100%):
Пример
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Примечание. Убедитесь, что сумма составляет 12 или меньше (не обязательно использовать все 12 доступных столбцов):
Для разделения 33,3%/66,6% вы должны использовать .col-sm-4
и .col-sm-8
(а для разделения 50%/50% вы должны использовать .col-sm-6
и .col-sm-6
):
Пример
<!-- 33.3/66.6% split: -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split: -->
<div class="container-fluid">
<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>
Колонки автоматического макета
В Bootstrap 4 есть простой способ создать столбцы одинаковой ширины для всех устройств: просто удалите номер .col-sm-*
и используйте .col-sm
класс только для указанного количества
элементов столбца . Bootstrap распознает количество столбцов, и каждый столбец будет иметь одинаковую ширину.
Если размер экрана меньше 576 пикселей , столбцы будут располагаться горизонтально:
<!-- 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>
В следующей главе показано, как добавить другой процент разделения для средних устройств.