直接写 .container { max-width: 1600px } 会破坏小屏响应，导致横向滚动；正确方式是用媒体查询精准覆盖对应断点（如 @media (min-width: 1400px) { .container { max-width: 1440px; } }），且自定义 CSS 必须在 Bootstrap 之后加载。
直接给 .container 写 max-width: 1600px 会破坏小屏响应，导致手机横屏或折叠屏横向滚动；真正生效的方式是复现 Bootstrap 原有断点逻辑，用媒体查询精准覆盖，且 CSS 必须在 Bootstrap 之后加载。
查清你用的 Bootstrap 版本和对应断点值
不同版本的断点阈值和默认宽度差异很大，改错数值就白忙：
- Bootstrap 5.3+ 有
xl（≥1200px，默认max-width: 1140px）和xxl（≥1400px，默认max-width: 1320px） - Bootstrap 4 只有
xl（≥1200px），没有xxl，想撑到 1400px 宽必须额外定义断点 - Bootstrap 3 断点更少，
lg是 ≥1200px，默认max-width: 1170px，且不支持xxl - 别靠 DevTools 里看到的“当前 computed 值”反推断点——它只表示哪条
@media被命中，不是区间边界
@media 覆盖指定断点（CDN / 已编译 CSS 环境）
这是最常用、最安全的方式，但必须同时满足三个硬性条件：
- 你的自定义 CSS 文件必须在
bootstrap.min.css之后加载 - 媒体查询条件必须严格匹配，比如
@media (min-width: 1400px)，不能写成1399px或1401px - 选择器保持为
.container，不要加前缀（如div .container）或后缀（如.container.my-class），避免权重降级
例如把超大屏（≥1400px）下的容器宽度从默认 1320px 扩到 1440px：
@media (min-width: 1400px) {
.container { max-width: 1440px; }
}
如果还要适配 2K 屏（≥1920px），再加一条：
@media (min-width: 1920px) {
.container { max-width: 1600px; }
}
为什么不能只写 .container { max-width: 1400px }
这条规则没带媒体查询，浏览器会把它应用到所有尺寸上：
- 手机竖屏（≈390px 宽）下也强制撑到 1400px，内容横向溢出，页面可左右拖动
- 大屏下又被 Bootstrap 原生的
@media (min-width: 1400px)规则覆盖，根本改不动 -
style="max-width: 1400px"写在 HTML 里同样无效，在 Chrome DevTools 的 Computed 面板里会显示为 crossed out - 加
!important能临时压住，但会让 xs/sm 断点也变成 1400px，响应式逻辑彻底失效
Sass 项目中重定义 $container-max-widths 变量
这是最彻底的方式，但极易静默失效——编译不报错，但检查 computed style 就会发现宽度根本没变：
- 必须在
@import "bootstrap/scss/functions"和@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前重赋值 - 键名必须完整且拼写严格为
xs、sm、md、lg、xl、xxl，缺一个或写成xxxl就回退默认值 - 推荐用
map-merge只改局部，避免漏掉其他断点，例如：
$container-max-widths: map-merge($container-max-widths, ( xl: 1280px, xxl: 1440px ));
新增了自定义断点（比如 xxxl），必须同步更新 $grid-breakpoints 和 $container-max-widths，否则不生效。
最容易被忽略的是：改完后没验证是否真生效——打开不同宽度的浏览器窗口，用 DevTools 检查 .container 的 computed max-width 值，而不是只看 CSS 规则是否被加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
