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

Question

[sleepy_hungry]

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

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

Как это сделать?)

Answer 1

[Алекс Глебов]

Подключаешь 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
);

Comments

[sleepy_hungry]

т.е. пришло время изучить препроцессоры (sass - это ведь он?)?

[Алекс Глебов]

sleepy_hungry, он самый

Answer 2

[tyzberd]

лучше своими стилями перебить.
А если в bootstrap тогда скачать https://getbootstrap.com/docs/4.4/getting-started/... все установить, и менять/добавлять в переменных например $grid-breakpoints: и $container-max-widths: в файле scss/_variables.scss потом собрать.

Answer 3

[mahmudchon]

хм?

@media (min-width: 320px) and (max-width: 413px) {
    /* стили */
}
@media (min-width: 414px) and (max-width: 575px) {
    /* другие стили*/
}

Comments

[sleepy_hungry]

если у меня для блоков прописан класс col-12, получается, что блок занимает полностью всю строку в диапазоне от 320 до 576 px. Но что прописать в классах, чтобы он занимал всю строку только до 414px?

Т.е. у col - диапазон 320-576. Col-sm 577-768. А какой col должен быть, чтобы от 414 до 576?

Сорян, если непонятно объясняю.