将容器最大宽度设置为 XXL 断点 Bootstrap 5答案

【问题标题】：Set container max width to XXL breakpoint Bootstrap 5将容器最大宽度设置为 XXL 断点 Bootstrap 5
【发布时间】：2021-01-01 08:06:40
【问题描述】：

我正在尝试 Bootstrap 5，在我的站点上，我不希望容器超过 1200 像素，这是 XL 断点。有没有办法删除 XXL 断点或简单地告诉它不要超出 XL 断点。

最好在我自己的自定义 CSS 表中，而不是使用 SaSS/Less。

【问题讨论】：

你是说你只关心容器的最大宽度吗？为什么不直接设置 .container { max-width: 1200px }？我不明白您为什么要完全删除 XXL 断点。
是的，不一定要删除断点，只需覆盖。是的，这似乎很简单地实现了我想要的。谢谢。

标签： css bootstrap-5

【解决方案1】：

只需在 .container 上设置 max-width...

.container {
    max-width: 1200px;
}

https://codeply.com/p/R0Y9RwNzqP

【讨论】：

我想你实际上会想要 max-width: 1140px;

【解决方案2】：

为了完整起见，这是 sass 的答案：要从 sass 中的编译中删除断点（包括所有实用程序，如 col-xxl-*），覆盖默认变量 $grid-breakpoints 和 $container-max-widths 并从数组中删除 xxl，如下所示：

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

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

确保在包含引导程序之前包含此内容。

【讨论】：

谢谢。了解如何正确修改源文件并重新编译 bootstrap.css 很有帮助。