直接写 .container { max-width: 1200px } 不行，因无媒体查询会强制应用于所有屏幕，导致小屏内容横向溢出；正确做法是按bootstrap版本断点（如v5.3+的@media (min-width: 1200px)）精准覆盖，并确保自定义css在bootstrap.min.css之后加载。
直接改 .container { width: 1200px } 或 .container { max-width: 1200px } 必定不匹配设计稿——Bootstrap 的容器宽度根本不是单条 CSS 决定的，而是由断点媒体查询 + max-width 阶梯控制的。你看到的“不一致”，其实是规则被覆盖、断点没对齐，或小屏下意外生效导致的视觉错位。
为什么写死 max-width 会让手机页面横向滚动
写了 .container { max-width: 1200px } 却没加 @media，这条规则就会无差别应用到所有屏幕尺寸。iPhone 竖屏视口约 390px，强制塞进 1200px 宽度，内容被横向挤压，触发 overflow-x: auto，页面出现左右拖动条。
- 浏览器开发者工具里能看到这条规则被划掉——不是没加载，是被 Bootstrap 原生的
@media (min-width: 1200px)规则覆盖了 - 小屏下它本该退回到
md断点（如 720px），但你的全局规则把它锁死了 - 真机测试比 Chrome 模拟器更敏感：滚动条占空间，实际可用宽度更小，临界点更容易触发溢出
CDN 项目怎么精准对齐设计稿的 1280px 宽度
必须复现 Bootstrap 当前版本的断点条件，且自定义 CSS 要在 bootstrap.min.css 之后加载。v5.3+ 默认 xl 断点是 1200px，对应容器宽 1140px；你要改成 1280px，就得覆盖这个断点：
- 确认你用的 Bootstrap 版本断点值（查官网或源码，v5.3 是
xl: 1200px、xxl: 1400px） - 只写需要改的断点，例如：
@media (min-width: 1200px) { .container { max-width: 1280px; } } - 如果设计稿还要求 ≥1400px 时到 1440px，再补一条
@media (min-width: 1400px)规则 - 绝对不要加
!important——顺序对、断点准，就能干净覆盖
Sass 项目重定义 $container-max-widths 容易静默失效
这不是改个变量就完事。Sass 编译时若键名、顺序、单位或依赖顺序出错，.container-xl 这类类名依然存在，但 computed style 里宽度还是默认值，毫无报错提示。
- 必须在
@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前赋值 - 键名必须完整且拼写严格一致：
xs、sm、md、lg、xl、xxl，缺一个，对应断点就回退默认 - 推荐用
map-merge只改局部：$container-max-widths: map-merge($container-max-widths, ( xl: 1280px, xxl: 1440px ));
- 如果新增了自定义断点（如
xxxl），必须同步更新$grid-breakpoints和$container-max-widths，否则不触发
最常被忽略的是父容器的 padding 或 overflow 设置——它不会改变 max-width 计算值，但会让内容区视觉变窄，或者因滚动条占位导致临界点偏移。设计稿给的是内容区净宽，而 Bootstrap 的断点和容器宽度，是按视口宽度 + 滚动条是否出现共同决定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
