直接写 .container { max-width: 1200px } 会导致小屏横向滚动，因无媒体查询会强制应用到所有尺寸；Bootstrap 的容器宽度通过 @media (min-width: ...) 分断点控制，需按版本匹配断点值并确保自定义 CSS 在 Bootstrap 后加载。
为什么直接写 .container { max-width: 1200px } 会导致手机横向滑动
这条规则没带任何媒体查询，浏览器会把它应用到所有屏幕尺寸——包括 iphone 竖屏（≈390px 宽）。结果就是内容被强行撑到 1200px，触发横向滚动条。bootstrap 的 .container 实际是一组 @media (min-width: ...) 规则，比如 v5.3+ 中：@media (min-width: 1200px) 控制 xl 断点，@media (min-width: 1400px) 控制 xxl 断点。你写的无断点样式既压不住大屏原生规则，又在小屏下失控。
CDN 项目：用媒体查询精准覆盖指定断点
适用于引入 bootstrap.min.css 的项目，关键不是“改宽度”，而是“复现断点逻辑”：
- 自定义 CSS 文件必须放在 Bootstrap CSS 之后加载（否则规则不生效）
- 断点值必须严格匹配你用的 Bootstrap 版本（v5.3+ 是
xl: 1200px、xxl: 1400px；v4 是xl: 1200px，无 xxl） - 只改你需要的断点，例如把 xl 断点下的宽度从 1140px 扩到 1280px：
@media (min-width: 1200px) {<br> .container { max-width: 1280px; }<br>} - 不要加
!important，也不要用div.container这类降权选择器——简洁的.container就够了
Sass 项目：重定义 $container-max-widths 变量
这是最干净的方式，但只适用于自己编译 Bootstrap 的场景（如 Webpack + sass-loader）：
- 必须在
@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前重定义变量 - 键名必须拼写准确（
sm、md、lg、xl、xxl），漏一个或写错就静默失效 - 示例（v5.3+）：
$container-max-widths: (<br> sm: 540px,<br> md: 720px,<br> lg: 960px,<br> xl: 1280px,<br> xxl: 1440px<br>);
- 改完后必须重新编译 CSS，热更新不会自动生效
.container-fluid 加 max-width 为什么看起来没反应
.container-fluid 默认只有 width: 100% 和左右 padding，没有 max-width。直接加 max-width 后如果不配 margin: 0 auto，它仍会左对齐，右侧留白，视觉上像“没生效”：
- 正确写法：
.container-fluid.custom-max {<br> max-width: 1400px;<br> margin: 0 auto;<br>} - 注意：加了
max-width后，它就不再是“流体”语义，实际行为接近定制版.container - 别嵌套使用
.container-fluid包.container——两者 padding 都是 15px，嵌套后变成 30px，.row的负 margin 抵消不完，内容会被挤出视口
真正容易被忽略的是断点对齐和加载顺序。很多人查到代码就复制粘贴，却忘了确认自己用的是 v5.3 还是 v4，也没检查自定义 CSS 是否真的在 Bootstrap 之后加载——这两点一错，所有媒体查询都白写。
