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

Question

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

最好在我自己的习惯中 CSS sheet 而不是使用 SaSS/Less.

Answer 1

只需在 .container...

上设置最大宽度

.container {
    max-width: 1200px;
}

https://codeply.com/p/R0Y9RwNzqP

Answer 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 之前包含此内容。

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

Set container max width to XXL breakpoint Bootstrap 5

css

bootstrap-5