Bootstrap 3 中直接写 .container { max-width: 1400px } 会破坏响应式，小屏强制撑宽致横向滚动，大屏又被原生媒体查询覆盖；正确做法是按其断点（xs/sm/md/lg）用媒体查询精准覆盖，或局部使用 .container-fluid + 内层限宽容器。
Bootstrap 3 没有 xxl 断点，也不支持 map-merge 或 Sass 变量重定义（它用 Less），直接写 .container { max-width: 1400px } 会破坏小屏响应——手机上强制撑宽引发横向滚动，桌面端又大概率被原生媒体查询覆盖失效。
确认 Bootstrap 3 的断点阈值和默认宽度
Bootstrap 3 的断点只有四个，且是 max-width + min-width 混合逻辑（非纯 min-width），关键阈值必须严格匹配：
-
xs：无媒体查询，.container默认max-width: 100% -
sm：@media (min-width: 768px)→max-width: 750px -
md：@media (min-width: 992px)→max-width: 970px -
lg：@media (min-width: 1200px)→max-width: 1170px
别按 DevTools 里看到的“当前 computed 值”反推断点；比如你看到 max-width: 970px，不能直接猜成 @media (min-width: 970px)——那是错的，必须查官方文档或源码。
用自定义 CSS 覆盖指定断点（CDN / 编译版通用）
这是最实际、最可控的方式，但三个条件缺一不可：
立即学习“前端免费学习笔记（深入）”；
- 你的 CSS 文件必须在
bootstrap.min.css之后加载（顺序错=规则不生效） - 媒体查询条件必须一字不差，例如
@media (min-width: 1200px)，不能写成1199px或1200.1px - 选择器保持为
.container，不要加前缀（如div .container）或后缀（如.container.my-class），避免权重降级
例如把大屏（≥1200px）下的容器宽度从默认 1170px 扩到 1320px：
@media (min-width: 1200px) {
.container {
max-width: 1320px;
}
}
如果还要适配超宽屏（比如 ≥1600px），再补一条：
@media (min-width: 1600px) {
.container {
max-width: 1440px;
}
}
为什么 Less 变量方式在 Bootstrap 3 中几乎不可行
Bootstrap 3 使用 Less 编译，理论上可通过重定义 @grid-container-width 等变量控制，但实践中极易静默失败：
- 变量名不是
$container-max-widths（那是 Bootstrap 4+ 的 Sass 写法），而是分散的：@container-sm、@container-md、@container-lg - 这些变量只在
variables.less和mixins.less中被引用，但.container的样式实际定义在grid.less里，且硬编码了max-width值，不完全依赖变量 - 即使你改了变量，若未重新完整编译整个 Bootstrap，改动不会进入最终 CSS
换句话说：想靠改变量生效，你得自己搭 Less 构建流程，并确保所有依赖文件按正确顺序 @import。对多数仅引入 CDN 的项目，这条路成本远高于写几行媒体查询。
局部突破比全局修改更安全
如果你只是某一块区域（比如首页 Banner）需要更宽，不要动全局 .container：
- 用
.container-fluid作为外层容器（它无max-width，100% 宽） - 内部嵌套一个带自定义宽度的
<div class="my-wide-container">，并手动加margin: 0 auto居中 - 这样既避开断点冲突，又不影响正文等其他区域的响应行为
示例：
<div class="container-fluid">
<div class="my-wide-container" style="max-width: 1440px; margin: 0 auto;">
<h1>全宽 Banner</h1>
</div>
</div>
最后注意：改完务必在真实设备或浏览器响应式调试工具中切换不同宽度（尤其是 375px、768px、1200px、1600px 几个关键点），检查 .container 的 computed max-width 是否如预期变化——光看 CSS 规则是否“加载了”，没用。
