Bootstrap 4 Grid Small
Пример небольшой сетки
| Extra small | Small | Medium | Large | Extra Large | |
|---|---|---|---|---|---|
| Префикс класса | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Ширина экрана | <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% Сплит на малых (и средних, больших и XLarge) устройств. На дополнительных малых устройствах, он будет автоматически стек (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%% Сплит, вы бы использовать .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 класс на указанное число элементов Col. 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>
В следующей главе показано, как добавить другой разделенный процент для средних устройств.