Как сделать дополнительные брекпоинты bootstap 4?

Question

[WebforSelf]

Вопрос такого плана, есть макет, ширина которого 1920px
Но есть контейнер 1600.

Сделал такого плана - 1920 это - container-fluid
1600 - container

Задал с помощью max-width ограничение.

Как сделать чтоб при изменении размера
container и container-fluid менялись пропорционально? Для чего это нужно, чтоб были отступы по бокам. Ведь при разрешении экрана в 1600 , будет всего по 15 пикселей по бокам.
Пока мысль пришла такая, составить пропорции
1920 / 1600
1600 / 1333.333px;
и т.д. или как правильней сделать чтоб отступы были пропорциональны?

Answer 1

[iBird Rose]

Вопрос такого плана, есть макет, ширина которого 1920px
Но есть контейнер 1600.

Это значит что что тебе не нужен container для 1920. потому что это обычные 100%. т.е. просто обычный div итак будет работать так как тебе нужно.
для этого и отступы у container. потому что он создан для контентной части. чтобы когда ширина экрана будет равна контейнеру - текст не прилипал к бокам экрана.

А в остальном - открываешь sass исходники, файл _variables.scss и работаешь с двумя переменными: $grid-breakpoints и $container-max-widths как хочешь

Answer 2

[Spisoktem]

можете оставить container-fluid для всех десктопов и добавлять padding-left и padding-right в процентном соотношении главного контейнера(1600px) к ширине 1920px через медиа запрос все что ниже 1920px и выше 1200px, т.е это будет так:

@media (max-width: 1919px) and (min-width 1200px){
.container-fluid{
padding-left: 8.33333333%;
padding-right: 8.33333333%;
}
}