根本原因是直接覆盖 .container 宽度破坏了 bootstrap 响应式断点逻辑；正确做法是按断点精准覆盖，如 @media (min-width: 1200px) { .container { max-width: 1280px; } }，并确保加载顺序、断点对齐与选择器优先级正确。
Bootstrap 容器宽度与设计稿不一致，根本原因不是 CSS 写错了，而是你试图用单条规则覆盖一套响应式断点逻辑——.container 的宽度从来就不是“一个值”，而是一组 @media 规则在不同屏幕下的输出结果。
直接写 .container { max-width: 1200px } 为什么手机上横向滚动
这条规则没有媒体查询，浏览器会把它应用到所有尺寸：iPhone 竖屏（≈390px）下也强制拉到 1200px，内容被横向挤压，触发 overflow-x: auto，页面出现滚动条。你在 DevTools 的 Computed 面板里能看到它被划掉——不是没加载，是被 Bootstrap 原生的 @media (min-width: 1200px) 规则覆盖了，小屏下又因无约束而失控。
- 常见现象：真机测试时能左右拖动、Chrome 模拟器看着正常但文字错位、平板横屏突然变窄
- 别加
!important临时压住——这会让 xs/sm 断点也变成 1200px，响应式阶梯直接断裂 - 正确做法是只改你需要的断点，比如设计稿要求 ≥1200px 屏幕下容器宽 1280px，那就只写：
@media (min-width: 1200px) { .container { max-width: 1280px; } }
CDN 项目改宽度，为什么加了 !important 还是失效
加 !important 后小屏也被锁死在大屏宽度，这不是“没生效”，而是生效过头了——响应式逻辑被破坏。真正起作用的是 Bootstrap 自带的断点规则链，你的自定义 CSS 必须满足两个硬条件才能干净覆盖：
- 文件加载顺序：自定义 CSS 必须在
bootstrap.min.css之后引入 - 断点数值必须严格对齐版本：Bootstrap 5.3 的
xxl是@media (min-width: 1400px)，写成 1399px 或 1401px 都不会触发 - 选择器不能降权：写成
div.container优先级反而低于原生.container，应保持为.container
Sass 项目重定义 $container-max-widths 变量却没变化
变量覆盖失败不会报错，页面看起来“正常”，但实际宽度没变——这是最隐蔽的坑。关键约束有三条：
- 赋值位置必须卡在
@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前 - 键名必须完整：
xs、sm、md、lg、xl、xxl一个都不能少，缺一个对应断点就会回退默认值 - 如果新增了断点（如
xxxl），必须同步更新$grid-breakpoints和$container-max-widths，且键名、单位、顺序完全一致
设计稿是 1200px，但改完后页面在 1200px 临界点附近出现横向滚动条
这不是 CSS 问题，是浏览器滚动条占位导致的物理宽度偏差。当页面 Y 轴内容多产生滚动条时，视口可用宽度会减少（通常 17px），而你的媒体查询临界点（如 min-width: 1200px）和容器宽度（如 max-width: 1200px）恰好相等，就会在临界点附近触发 X 轴溢出。
- 解决方案不是强行隐藏
overflow-x，而是留出缓冲：把容器宽度设为 1180px 或把断点调到 1220px - 更稳妥的做法是参考 Bootstrap 原逻辑：它的
xl断点是 1200px，但默认max-width是 1140px，中间留了 60px 缓冲 - 设计稿标 1200px，实际实现建议设为
max-width: 1180px，避免滚动条干扰
