Чтобы изменить max-width контейнера в Bootstrap используется переменная $container-max-widths в файле _variables.scss. В этой переменной задается ширина контейнера для различных экранных размеров.
Начиная с версии Bootstrap 4, значение переменной $container-max-widths по умолчанию выглядит следующим образом:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Вы можете изменить значения для каждого размера экрана, чтобы установить собственные значения ширины. Например, если вы хотите установить максимальную ширину контейнера 1200px для всех экранов, вам нужно изменить значение для xl:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1200px
);
Если вам нужно изменить значения для всех размеров экрана, вы можете изменить значения для всех четырех элементов:
$container-max-widths: (
sm: 600px,
md: 800px,
lg: 1000px,
xl: 1200px
);
После изменения значений переменной $container-max-widths в _variables.scss, вам необходимо скомпилировать ваши SCSS-файлы в CSS, чтобы изменения вступили в силу. Обычно это делается с помощью инструментов сборки, таких как gulp или webpack, которые компилируют SCSS-файлы в CSS-файлы.
После компиляции ваших SCSS-файлов, контейнеры в Bootstrap будут иметь новую максимальную ширину, которую вы установили.