根本原因在于直接覆盖 .container 宽度，会破坏 Bootstrap 原有的响应式断点机制；更推荐的做法是按断点精确覆盖，例如 @media (min-width: 1200px) { .container { max-width: 1280px; } }，同时确保 CSS 加载顺序、断点设置和选择器优先级都保持正确。
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，直接破坏 Bootstrap 响应式布局层级 - 正确方式是只覆盖目标断点，例如设计稿要求在 ≥1200px 屏幕下容器宽度为 1280px，那么就只写：
@media (min-width: 1200px) { .container { max-width: 1280px; } }
CDN 项目修改宽度，为什么加了 !important 还是看起来无效
加上 !important 之后，小屏设备同样会被锁定到大屏宽度，这并不是“没有生效”，而是生效过度，导致整个响应式规则被打乱。真正决定 Bootstrap 容器宽度的，是它内部已经写好的断点规则链；因此你的自定义 CSS 想要稳定覆盖，必须同时满足以下几个关键条件：
- 文件加载顺序必须正确：自定义 CSS 一定要放在
bootstrap.min.css之后引入 - 断点数值要与 Bootstrap 版本严格一致：例如 Bootstrap 5.3 的
xxl断点是@media (min-width: 1400px)，如果写成 1399px 或 1401px，都无法准确命中 - 选择器不要错误降权：写成
div.container并不会比原生.container更合理，实际应继续使用.container保持一致
Sass 项目重定义 $container-max-widths 变量却没有生效
在 Sass 项目里，变量覆盖失败通常不会直接报错，页面表面看起来也“没有异常”，但容器实际宽度并没有变化——这类问题往往最难排查。要让 Bootstrap 容器宽度变量真正生效，需要重点检查以下三项：
- 赋值位置必须准确：要放在
@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，这样能有效避免滚动条对布局造成干扰
