bootstrap 5 中修改 container 在 xxl 断点下的最大宽度必须同步调整 $container-max-widths 和 $grid-breakpoints 变量（sass 方式）或严格匹配媒体查询条件并确保 css 加载顺序（纯 css 方式），否则响应式失效。
Bootstrap 5 默认的 container 在 xxl（≥1400px）断点下最大宽度是 1140px，如果你需要它在超大屏上撑得更宽（比如 1320px 或全宽），不能只靠覆盖 max-width —— 必须同步调整断点定义和容器类行为，否则媒体查询会失效或被覆盖。
修改 Bootstrap 的 $container-max-widths Sass 变量
这是最干净、可复用的方式，适用于你使用 Sass 编译 Bootstrap 的项目（如通过 bootstrap/scss/bootstrap.scss 引入）。
关键点：必须在导入 Bootstrap 主文件前重定义变量，且要完整覆盖整个断点映射，否则 xxl 项会被忽略。
- 在自定义 Sass 文件顶部（早于
@import "bootstrap"）写：
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ); <p>$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px // ← 这里改为你想要的值，比如 1320px 或 100% );</p>
-
xxl键必须存在且拼写一致，大小写敏感；如果漏掉，编译后该断点下的container会回退到xl的宽度 - 值可以是像素（
1320px）、百分比（96%），但不建议用100%——那会让container失去“居中+留白”语义，此时不如直接用container-fluid - 如果你只改了
$container-max-widths却没同步更新$grid-breakpoints，Sass 编译器可能静默忽略xxl条目
纯 CSS 覆盖方式（无 Sass 环境时）
适合 CDN 引入或无法修改源码的场景，但要注意选择器权重和媒体查询顺序。
Bootstrap 5 的 container 在 xxl 断点下的样式规则类似：
@media (min-width: 1400px) {
.container {
max-width: 1140px;
}
}
你要做的不是简单加一条 .container { max-width: 1320px }，而必须匹配原媒体查询条件并提高优先级：
- 复制原断点宽度（
1400px），写成：
@media (min-width: 1400px) {
.container {
max-width: 1320px !important; /* !important 是保险做法 */
}
}
- 把这段 CSS 放在 Bootstrap CSS 之后加载，否则会被覆盖
- 不要用
max-width: none或unset——部分旧版浏览器不支持，且会破坏container的响应式层级逻辑 - 如果页面同时用了
container-lg/container-xl等变体，它们不会受此影响，需单独覆盖
为什么不能只改 .container 的 max-width？
因为 Bootstrap 的 container 类本身没有硬编码宽度，所有尺寸都由媒体查询驱动。直接写 .container { max-width: 1320px } 会在所有屏幕下生效，小屏也会被拉宽，破坏响应式设计。
- 例如在手机上，
max-width: 1320px会让容器远宽于视口，触发横向滚动 - Bootstrap 的断点逻辑是“向上覆盖”：
xl规则会被xxl覆盖，但如果没有xxl媒体查询，就不会生效 - 如果你用的是 Bootstrap 4，
xxl断点根本不存在（最早从 v5.1 开始引入），此时改xxl完全无效
真正起作用的是断点 + 变量 + 编译三者联动。改一个环节，其他环节没对齐，就会出现“改了但没完全改”的情况——比如开发者调了 $container-max-widths 却忘了重编译，或者写了 CSS 但加载顺序错了。这类问题往往看不出报错，只表现为“明明改了却没变”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
