@sleepy_hungry

Как добавить свой breakpoint в Bootstrap 4?

Всем привет.
Пытаюсь разобраться с бутстрапом. Там есть несколько стандартных диапазонов: col-, col-sm, col-md, col-lg, col-xl.

В медиа-запросах я добавил еще один диапазон от 414 до 576px. Он входит в стандартный диапазон extra-small от 320 до 576px, но блоки должны вести себя по разному: от 320 до 414 px располагаться друг под другом, а с 414 до 576 - рядом.

Как это сделать?)
  • Вопрос задан
  • 1599 просмотров
Решения вопроса 2
SkiperX
@SkiperX Куратор тега CSS
Подключаешь sass версию бутстрапа
Копируешь себе переменные из _variables.scss и переопределяешь до подключения самого бутстрапа
https://github.com/twbs/bootstrap/blob/master/scss...
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);
Ответ написан
@tyzberd
лучше своими стилями перебить.
А если в bootstrap тогда скачать https://getbootstrap.com/docs/4.4/getting-started/... все установить, и менять/добавлять в переменных например $grid-breakpoints: и $container-max-widths: в файле scss/_variables.scss потом собрать.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
mahmudchon
@mahmudchon
хм?
@media (min-width: 320px) and (max-width: 413px) {
    /* стили */
}
@media (min-width: 414px) and (max-width: 575px) {
    /* другие стили*/
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы