直接修改 .container 的 max-width 会破坏响应逻辑，导致小屏内容溢出；应通过 sass 变量、媒体查询覆盖或 container-fluid+container 组合等方式按需调整。
直接改 .container 的 max-width 会破坏响应逻辑
手动加 style="max-width: 1200px" 或在 CSS 里写 .container { max-width: 1200px } 看似简单，但会导致小屏（比如手机）下也卡死在这个宽度，内容横向溢出或被强制缩放。因为 Bootstrap 的 .container 是靠媒体查询分断点控制的，不是单个固定值——你覆盖掉的是所有断点下的规则，而不是某一个。
常见错误现象包括：
- iPhone 上页面左右滑动才能看到完整内容
- 平板横屏时容器突然变窄，和设计稿对不上
- 开发时在 Chrome 模拟器里看着正常，真机测试才发现错位
三种可落地的修改方式及适用场景
改法不止一种，选哪个取决于你改的是“全局规范”还是“局部例外”：
- 用 Sass 变量
$container-max-widths：适合工程化项目、有构建流程、需长期维护的团队。必须在@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前重定义，且键名（sm、lg、xxl）不能拼错，否则对应断点失效 - 纯 CSS 媒体查询覆盖：适合 CDN 引入、无 Sass 环境的项目。例如在自定义 CSS 文件末尾写：
@media (min-width: 1200px) { .container { max-width: 1400px; } }注意加载顺序必须在 Bootstrap CSS 之后，且不要加!important -
.container-fluid+ 内层.container组合：适合 Banner、全宽背景图等局部突破需求。外层撑满视口，内层仍走标准断点，语义清晰、零副作用、兼容所有 Bootstrap 5 版本
.container-lg 这类断点类不是“改宽度”，而是“切换生效断点”
.container-lg 不会把所有屏幕都设成 lg 断点的宽度，它的实际行为是：“在 lg 断点以下（即 max-width: 991.98px）时宽度为 100%，从 lg 开始才应用 lg 及以上断点的 max-width”。这和修改 $container-max-widths 是两回事。
使用场景有限：
- 登录页想在手机上全宽、PC 上才限制宽度，可用
.container-sm - 不想改全局配置，又希望某个区块比默认更早启用宽屏限制，可试
.container-md - 它不改变其他容器的行为，也不影响栅格列数或断点阈值
容易被忽略的兼容性坑
Bootstrap 5.0.x 和 5.1+ 对 $container-max-widths 的处理不同：5.0.x 要求变量必须是 map 类型，且部分构建工具（如老版本 dart-sass）可能静默失败；混用 Bootstrap 4 的变量名（如 $grid-breakpoints）会导致编译不报错但容器回退到默认值——你得靠浏览器开发者工具比对渲染出的 max-width 值才能发现。
另一个隐形成本：改了 $container-max-widths 后，所有基于断点的组件（如 .col-lg-6、.d-lg-block）的触发阈值不变，但容器内容区域变宽了，可能导致文字行宽超标、图片拉伸、按钮换行异常——这些不会报错，只能靠视觉回归测试暴露。
