Bootstrap 4 Изменить точки останова

У меня есть приложение, в котором дизайн требует 1280 точек останова от настольного компьютера до планшета или, соответственно, от xl до lg. Тем не менее, Bootstrap сам имеет xl точку останова в 1200.

Мне нужно изменить эту контрольную точку xl глобально для бутстрапа. Нужно ли перекомпилировать Bootstrap 4 из исходных файлов?

Я попытался установить это с помощью моей сборки Sass:

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1280px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px
);

Тем не менее, ничего не изменилось с точкой останова для xl глобально, он все равно сделает перерыв вместо 1200px.

ОТВЕТЫ

Ответ 1

Изменение переменной $grid-breakpoints будет работать нормально. Помните, что вы должны импортировать /bootstrap или bootstrap/variables в custom.scss, а затем @import bootstrap после.

Например:

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1280px
);

Демо: https://www.codeply.com/go/MlIRhbJYGj

Также смотрите: Как расширить/изменить (настроить) Bootstrap 4 с помощью SASS

Ответ 2

Вам необходимо переопределить переменные $grid-breakpoints и $container-max-widths. Вот рабочий пример (scss):

// File: theme.scss
// Override default BT variables:
$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1900px
);

$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px,
        xxl: 1610px
);

// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...

Ответ 3

Согласно их документации, для настройки Bootstrap вам необходимо:

  1. скопируйте/вставьте из /scss/_variables.scss в _custom.scss что вы хотите изменить
  2. удалить любой !default из вставленного кода и изменить значения на то, что вы хотите
  3. перекомпилируйте (см. Инструменты сборки) - вам нужно успешно запустить npm run dist для перестройки из исходного кода.

Вы не должны изменять что-либо внутри _variables.scss поскольку вы потеряете эти изменения при обновлении Bootstrap. С помощью приведенных выше шагов вы можете безопасно обновить Bootstrap и сохранить свои моды.

Примечание. Даже если вы не заботитесь об обновлении и хотите изменить непосредственно в /scss/_variables.scss, вам все равно нужно перекомпилировать, чтобы применить изменения к вашим /dist/ файлам.