Bootstrap 4 - 理解 $grid-breakpoints 和 $container-max-widths答案

【问题标题】：Bootstrap 4 - understanding $grid-breakpoints and $container-max-widthsBootstrap 4 - 理解 $grid-breakpoints 和 $container-max-widths
【发布时间】：2020-05-08 08:53:18
【问题描述】：

我需要添加更多断点来支持笔记本电脑和台式机，因为默认的引导程序 4 断点仅适用于移动设备，并且无法仅为屏幕宽度为 1280 像素的笔记本电脑屏幕隐藏容器，但要显示它在桌面上，因为最大断点 (xl) 是 1200px。见here。

您需要编辑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呢？ 1199px 和 1140px 之间的 59px 会发生什么？

【问题讨论】：

标签： sass bootstrap-4

【解决方案1】：

您正在寻找 grid 和 container 之间的区别。
如果您将 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/

【讨论】：