В работе над версткой часто необходимо работать и с большими разрешениями экранов, но, к сожалению, большинство фреймворков ограничивают стили грида максимальным разрешением экрана в 1200px. Исключением не стала и новая, четвертая версия популярного фреймворка Bootstrap.
Немного о гриде
Так как в нашей работе такая необходимость частов возникает, мы разработали файл со стилями грида для большинства разрешений col-xga (1600+), col-fhd (1920+), col-rt (2560+), col-rt15 (2880+), col-uhd (3840+), col-4k (4096+), col-8k (8192+)) пикселей.
Помимо работы с колонками грида, файл так же содержит такие важные опции, как order и offser, опции типа отображения эллементов none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex и другие flex, justify-content, align-items, align-content и align-self.
Файл выложили для всеобщего использования, будем рады, если проявите интерес к нашим работам отзывом, рекомендацией или пул-реквестом.
Установка
Файл со стилем необходимо подключить после основного bootstrap.min.css и перед остальными стилями для сайта.
Ссылка на репозиторий:
https://github.com/adminnu/bootstrap-largegrid
Стандартные средства bootstrap 4
В четвертой версии появились уровни сетки (Grid tiers) с помощью которых можно добавить свои уровни сетки, в том числе это подходит для добавления больших разрешений, но библиотеку необходимо перекомпилировать с помощью SASS компилятора.
Для компиляции скачиваем последнюю версию билиотеки и меняем следующие значения двух переменных:
Важно! Значения указываем только в px (пикселях).
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xga: 1600px,
fhd: 1920px,
rt: 2560px,
rt15: 2880px,
uhd: 3840px,
4k: 4096px,
8k: 8192px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xga: 1530px,
fhd: 1830px,
rt: 2470px,
rt15: 2790px,
uhd: 3810px,
4k: 4006px,
8k: 8102px
);
Всем успехов в красивой и удобной верстке!
Оригинальная статья на сайте https://onlinebd.ru/blog/bootstrap-4-grid-dlya-bolshikh-rezreshenii-ekranov