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

Question

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

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

Answer 1

为了完整起见，这是 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 之前包含此内容。

Answer 2

只需设置最大宽度.container...

.container {
    max-width: 1200px;
}

https://codeply.com/p/R0Y9RwNzqP