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 |
В предыдущей главе мы представили пример сетки с классами для малых и средних устройств. Мы использовали два элемента div (столбца) и дали им разделение 25%/75% на маленьких устройствах, 50%/50% на средних устройствах и 33%/66% на больших устройствах:
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
Но на устройствах xlarge дизайн может быть лучше, если разделить его на 20%/80%.
К сверхбольшим устройствам относятся устройства с шириной экрана от 1200 пикселей и выше .
Для устройств xlarge мы будем использовать .col-xl-*
классы:
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>
Следующий пример приведет к разделению 25%/75% на небольших устройствах, разделении 50%/50% на средних устройствах, разделении 33%/66% на больших устройствах и разделении 20%/80% на больших устройствах. На очень маленьких устройствах он будет автоматически складываться (100%):
Пример
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4
col-xl-2">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8
col-xl-10">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Примечание. Убедитесь, что сумма всегда равна 12.
Использование только XLarge
В приведенном ниже примере мы указываем только .col-xl-6
класс (без .col-lg-*
, .col-md-*
и/или .col-sm-*
). Это означает, что устройства xlarge будут разделены 50%/50%. Однако для больших, средних, малых и очень маленьких устройств он будет располагаться вертикально (100% ширины):
Пример
<div class="container-fluid">
<div class="row">
<div class="col-xl-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-xl-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Колонки автоматического макета
В Bootstrap 4 есть простой способ создать столбцы одинаковой ширины для всех устройств: просто удалите номер .col-xl-*
и используйте .col-xl
класс только для указанного количества
элементов столбца . Bootstrap распознает количество столбцов, и каждый столбец будет иметь одинаковую ширину.
Если размер экрана меньше 1200 пикселей , столбцы будут располагаться горизонтально:
<!-- Two columns: 50% width on xlarge and up-->
<div class="row">
<div class="col-xl">1 of
2</div>
<div class="col-xl">2 of 2</div>
</div>
<!-- Four
columns: 25% width on xlarge and up -->
<div class="row">
<div class="col-xl">1 of 4</div>
<div class="col-xl">2 of 4</div>
<div class="col-xl">3
of 4</div>
<div class="col-xl">4 of 4</div>
</div>