直接写 .container { max-width: 1400px } 不行，因为 Bootstrap 的 .container 宽度由多级媒体查询控制，无断点规则会在小屏下强制撑宽引发横向滚动，大屏下又被原生规则覆盖；加 !important 则破坏全部响应式逻辑。
直接写 .container { max-width: 1400px } 为什么不行
因为 Bootstrap 的 .container 宽度不是单条 CSS 控制的，而是靠一组 @media (min-width: ...) 规则阶梯生效。你写的无断点规则：
- 在大屏下（比如
@media (min-width: 1200px)）被原生规则直接覆盖 - 在小屏下（如手机竖屏 ≈390px 宽）却意外生效，强制把内容撑到 1400px，触发横向滚动条
- 加
!important会让所有断点都变成 1400px，彻底破坏响应式逻辑
CDN 项目：用媒体查询精准覆盖对应断点
这是最常用、最安全的做法，前提是你的自定义 CSS 文件加载顺序在 Bootstrap CSS 之后。
- 先确认你用的 Bootstrap 版本断点值：v5.3+ 是
xl: 1200px、xxl: 1400px；v4 是xl: 1200px，没有xxl - 只覆盖你需要的断点，例如把 xxl 断点从默认 1140px 改为 1440px：
@media (min-width: 1400px) {<br> .container { max-width: 1440px; }<br>} - 别写
div.container这类降权选择器，保持.container简洁即可 - 不要加
!important——只要断点值对、顺序对，就能干净覆盖
Sass 项目：重定义 $container-max-widths 变量
这是最彻底的方式，但只适用于你自己编译 Bootstrap（如 Webpack + sass-loader）。
- 必须在
@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前重赋值 - 键名
(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 套内层限宽容器
这不是“改宽度”，而是换思路——适合那些实际需求是“视觉上更宽松”，而非硬要修改 .container 行为的场景。
-
.container-fluid本身宽度恒为 100%，但默认带左右各 15px padding - 加
mx-auto和max-width控制内容区：<div class="container-fluid"><br> <div class="mx-auto" style="max-width: 1400px;">...</div><br></div>
- 配合间距工具类更灵活：
px-5拉开内边距，px-0彻底清空，比硬调.container更可控 - 注意：此时它已失去“居中+留白”的语义，行为接近定制版
.container，但规避了断点覆盖风险
@media (min-width: 1400px) 却用着 v4 的 Bootstrap，或者 Sass 中漏掉 xxl 键名，都不会报错，但宽度就是不变。 
