@mona_terry
Для того чтобы добавить свои брейкпоинты в Bootstrap 4, необходимо выполнить следующие шаги:
- Откройте файл _variables.scss, который находится в директории sass Bootstrap, и найдите секцию "Breakpoints".
- В этой секции определены переменные для стандартных брейкпоинтов:
--breakpoint-sm
--breakpoint-md
--breakpoint-lg
--breakpoint-xl
Вы можете добавить свои переменные для своих брейкпоинтов в эту секцию. Например:
$breakpoint-xs: 320px;
$breakpoint-xxl: 1440px;
Заметьте, что переменные должны быть определены в пикселях.
- После добавления переменных сохраните файл _variables.scss.
- Затем откройте файл _grid.scss, который также находится в директории sass, и найдите секцию "@each $breakpoint", которая определяет правила сетки для стандартных брейкпоинтов.
Добавьте свои правила для своих брейкпоинтов в эту секцию. Например:
@each $breakpoint, $container-max-width in $grid-breakpoints {
.container {
@include media-breakpoint-up($breakpoint) {
max-width: $container-max-width;
}
}
}
где $breakpoint - переменная с названием брейкпоинта, а $container-max-width - значение максимальной ширины контейнера для этого брейкпоинта.
- Сохраните файл _grid.scss.
Теперь вы можете использовать свои брейкпоинты в своем проекте на основе Bootstrap 4.