直接写 .container { max-width: 1200px } 无效是因为该规则无媒体查询，导致小屏强制宽1200px引发溢出，大屏又被Bootstrap原生断点覆盖；正确做法是按版本匹配断点、确保CSS加载顺序、使用精准媒体查询覆盖。
直接写 .container { max-width: 1200px } 为什么无效还出问题
这条规则没带媒体查询，浏览器会把它应用到所有屏幕尺寸上。手机竖屏（≈390px 宽）下也强制撑到 1200px，内容横向溢出，页面可左右拖动；而大屏下又会被 Bootstrap 原生的 @media (min-width: 1200px) 规则覆盖，根本改不动。这不是 CSS 写错了，是逻辑错位——.container 的响应式靠的是断点阶梯，不是单条样式。
用自定义 CSS 覆盖指定断点，必须严格匹配原生条件
适用于 CDN 引入 bootstrap.min.css 的项目，关键在三点：顺序、断点值、选择器权重。
- 你的 CSS 文件必须在 Bootstrap CSS 之后加载
- 断点值必须和你用的 Bootstrap 版本一致：v5.3+ 是
xl: 1200px、xxl: 1400px，不能写成1199px或1201px - 只覆盖你需要的断点，比如只想扩大桌面端宽度：
@media (min-width: 1200px) { .container { max-width: 1280px; } } @media (min-width: 1400px) { .container { max-width: 1440px; } } - 别用
div .container这类降权写法，保持.container简洁即可 - 不需要
!important——只要顺序对、断点准，就能干净覆盖
Sass 项目中重定义 $container-max-widths 变量容易静默失败
这是官方推荐方式，但三个条件缺一不可，否则编译不出效果，也不报错。
- 必须放在
@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前 -
$container-max-widths必须包含全部键名：xs、sm、md、lg、xl、xxl，漏一个，对应断点就回退默认值 - 如果只调大
xl和xxl，推荐用map-merge避免遗漏：$container-max-widths: map-merge($container-max-widths, ( xl: 1280px, xxl: 1440px ));
- 新增了自定义断点（如
xxxl），必须同步更新$grid-breakpoints和$container-max-widths，否则不生效
查清你实际用的 Bootstrap 版本和断点阈值
不同版本的断点阈值和默认宽度不同，改错数值就白忙。v5.3+ 默认是：sm: 540px（≥576px）、md: 720px（≥768px）、lg: 960px（≥992px）、xl: 1140px（≥1200px）、xxl: 1320px（≥1400px）。xs 没媒体查询，是兜底值 100%。别拿 DevTools 里“当前生效值”反推断点范围——它只表示哪条 @media 被命中，不是区间。
立即学习“前端免费学习笔记（深入）”；
