直接写 .container { max-width: 1400px } 不行，因为它在小屏下强制撑宽导致横向滚动，大屏下又被 Bootstrap 媒体查询覆盖而失效；正确做法是按 Bootstrap 断点用媒体查询精准覆盖或 Sass 中重定义 $container-max-widths 变量。
直接写 .container { max-width: 1400px } 为什么不行
它会破坏响应式逻辑：在小屏（比如 iphone 竖屏 ≈390px 宽）下，这条规则意外生效，把容器硬撑到 1400px，触发横向滚动；而在大屏下，又被 bootstrap 原生的 @media (min-width: 1200px) 规则覆盖，根本不起作用。你看到的“没变”或“手机滑动”，都是这个原因。
CDN 项目用媒体查询精准覆盖断点
适用于引入 bootstrap.min.css 的项目，关键不是改所有屏幕，而是复现 Bootstrap 的断点阶梯：
- 先确认你用的 Bootstrap 版本断点值：v5.3+ 是
xl: 1200px、xxl: 1400px；v4.x 没xxl，只有xl: 1200px - 自定义 CSS 文件必须放在 Bootstrap CSS 之后 加载
- 只覆盖你需要的断点，例如把
xl断点（≥1200px）宽度从默认 1140px 改为 1280px：@media (min-width: 1200px) {<br> .container { max-width: 1280px; }<br>} - 如果还适配 2K 屏，同步加
xxl断点：@media (min-width: 1400px) {<br> .container { max-width: 1440px; }<br>} - 不要加
!important——只要选择器是.container（不降权成div.container），且加载顺序对，就能干净覆盖
Sass 项目重定义 $container-max-widths 变量
这是最彻底的方式，但极易因顺序或拼写出错而静默失效（浏览器不报错，但宽度不变）：
- 必须在
@import "bootstrap/scss/functions"和@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前 重赋值 - 键名必须严格为
xs、sm、md、lg、xl、xxl，少一个或拼错，对应断点就回退默认值 - 推荐用
map-merge只改局部，避免漏掉其他断点：$container-max-widths: map-merge($container-max-widths, (<br> xl: 1280px,<br> xxl: 1440px<br>));
- 如果新增了自定义断点（如
xxxl），必须同步更新$grid-breakpoints和$container-max-widths，否则不生效
局部突破用 .container-fluid 套内层限宽容器
当只要 Banner、全宽图表等某一块区域突破默认宽度，其他保持原样时，硬改全局 .container 是最危险的选择：
-
.container-fluid本身是width: 100%，无任何max-width，也不响应断点 - 给它加
max-width同时必须配margin: 0 auto才能居中：.container-fluid.custom-max {<br> max-width: 1400px;<br> margin: 0 auto;<br>} - 实际行为接近定制版
.container，但语义清晰、零副作用、兼容所有 Bootstrap 5 版本 - 注意：
.container-fluid默认带左右padding（来自--bs-gutter-x），如需完全去边距，加px-0
