Bootstrap 4 - понимание $ grid-breakpoints и $ container-max-widths

Question

Мне нужно добавить больше точек останова для поддержки ноутбуков и настольных компьютеров, поскольку стандартные точки останова bootstrap 4 создаются только для мобильных устройств, и невозможно скрыть контейнеры только для экранов ноутбуков с шириной экрана, например, 1280 пикселей, но показать его на рабочем столе, поскольку максимальная точка останова (xl) составляет 1200 пикселей. См. здесь .

. Для этого вам необходимо отредактировать scss/_variables.scss.

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
) !default;

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");


// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

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

В нем говорится: «Точки останова сетки: задайте минимальные размеры, при которых ваш макет изменится`

Таким образом, они установили минимум для xl на 1200px , и они определили максимум на 1140px .

В моем понимании, если окно 1199px , то оно переключается на lg. Но почему максимальный размер xl 1140px ? Что происходит с 59px между 1199px и 1140px?

Answer 1

Вы ищете разницу между grid и контейнером .
Если вы установите grid xl точку останова на 1200px и container -max-width до 1140px, это просто означает, что у вас будет пустое пространство 30px с каждой стороны контейнера.

Если вам не нужен этот пробел, используйте .container-fluid.

https://getbootstrap.com/docs/4.4/layout/overview/#containers

См. Также эту скрипту: https://jsfiddle.net/Sirence/v07Lynqo/7/