Bootstrap 4 Grid Medium
Пример средней сетки
Extra small | Small | Medium | Large | Extra Large | |
---|---|---|---|---|---|
Префикс класса | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
Ширина экрана | <576px | >=576px | >=768px | >=992px | >=1200px |
В предыдущей главе мы представили пример Grid с классами для небольших устройств. Мы использовали два Div (столбцы), и мы дали им 25% 75% Сплит:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Но на средних устройствах дизайн может быть лучше, как 50% 50% Сплит.
Средние устройства определяются как имеющие ширину экрана от 768 пикселей до 991 пикселей.
Для средних устройств мы будем использовать .col-md-*
классы:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
Теперь Bootstrap собирается сказать "на малых размеров, посмотрите на классы с-SM-в них и использовать их. На средних размерах, посмотрите на классы с-MD-в них и использовать эти".
Следующий пример приведет к 25% 75% Сплит на малых устройствах и 50% 50% разделить на средних (и больших и XLarge) устройств. На дополнительных малых устройствах, он будет автоматически стек (100%):
Пример
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Примечание: Убедитесь, что сумма добавляет до 12 или меньше (не обязательно использовать все 12 доступных столбцов):
Использование только средних
В приведенном ниже примере мы указываем только .col-md-6
класс (без .col-sm-*
). Это означает, что средние, большие и очень большие устройства будут делить 50%-50%-потому что класс масштабируется вверх. Однако, для малых и экстренных малых приспособлений, оно будет штабелировать вертикально (100% ширины):
Пример
<div class="row">
<div class="col-md-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
Автоматические столбцы макета
В Bootstrap 4 имеется простой способ создания столбцов с одинаковой шириной для всех устройств: просто удалите номер из .col-md-*
и используйте только .col-md
класс на указанное число элементов Col. Bootstrap будет распознать количество столбцов, и каждый столбец будет иметь одинаковую ширину.
Если размер экрана меньше 768px, столбцы будут складываться горизонтально:
<!-- Two columns: 50% width on medium and up-->
<div class="row">
<div class="col-md">1 of
2</div>
<div class="col-md">2 of 2</div>
</div>
<!-- Four
columns: 25% width on medium and up -->
<div class="row">
<div class="col-md">1 of 4</div>
<div class="col-md">2 of 4</div>
<div class="col-md">3
of 4</div>
<div class="col-md">4 of 4</div>
</div>
В следующей главе показано, как добавить различный процент разделения для больших устройств.