Sass Bootstrap 4-了解$grid断点和$container最大宽度

我需要添加更多断点来支持笔记本电脑和台式机，因为默认的bootstrap 4断点仅适用于移动设备，并且不可能仅为屏幕宽度为1280px的笔记本电脑屏幕隐藏容器，而是在台式机上显示，因为最大断点（xl）为1200px。看

您需要编辑

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

。

---

但是为什么xl1140px的最大尺寸是？59px在1199px和1140px之间会发生什么情况？

您正在寻找网格和容器之间的差异
如果将网格xl断点设置为1200px，将容器最大宽度设置为1140px，则表示容器两侧将有30px的空白

如果不需要此空白，请改用

.container fluid

---

另请参阅此提琴：

您正在查找网格和容器之间的差异
如果将网格xl断点设置为1200px，将容器最大宽度设置为1140px，则表示容器两侧将有30px的空白

如果不需要此空白，请改用

.container fluid

另请参见此小提琴：