为什么Bootstrap容器宽度与设计稿不一致

根本原因是直接覆盖 .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) 规则覆盖了，小屏下又因无约束而失控。

1. 常见现象：真机测试时能左右拖动、Chrome 模拟器看着正常但文字错位、平板横屏突然变窄
2. 别加 !important 临时压住——这会让 xs/sm 断点也变成 1200px，响应式阶梯直接断裂
3. 正确做法是只改你需要的断点，比如设计稿要求 ≥1200px 屏幕下容器宽 1280px，那就只写：

   @media (min-width: 1200px) { .container { max-width: 1280px; } }

CDN 项目改宽度，为什么加了 !important 还是失效

加 !important 后小屏也被锁死在大屏宽度，这不是“没生效”，而是生效过头了——响应式逻辑被破坏。真正起作用的是 Bootstrap 自带的断点规则链，你的自定义 CSS 必须满足两个硬条件才能干净覆盖：

1. 文件加载顺序：自定义 CSS 必须在 bootstrap.min.css 之后引入
2. 断点数值必须严格对齐版本：Bootstrap 5.3 的 xxl 是 @media (min-width: 1400px)，写成 1399px 或 1401px 都不会触发
3. 选择器不能降权：写成 div.container 优先级反而低于原生 .container，应保持为 .container

Sass 项目重定义 $container-max-widths 变量却没变化

变量覆盖失败不会报错，页面看起来“正常”，但实际宽度没变——这是最隐蔽的坑。关键约束有三条：

1. 赋值位置必须卡在 @import "bootstrap/scss/variables" 之后、@import "bootstrap/scss/container" 之前
2. 键名必须完整：xs、sm、md、lg、xl、xxl 一个都不能少，缺一个对应断点就会回退默认值
3. 如果新增了断点（如 xxxl），必须同步更新 $grid-breakpoints 和 $container-max-widths，且键名、单位、顺序完全一致

设计稿是 1200px，但改完后页面在 1200px 临界点附近出现横向滚动条

这不是 CSS 问题，是浏览器滚动条占位导致的物理宽度偏差。当页面 Y 轴内容多产生滚动条时，视口可用宽度会减少（通常 17px），而你的媒体查询临界点（如 min-width: 1200px）和容器宽度（如 max-width: 1200px）恰好相等，就会在临界点附近触发 X 轴溢出。

1. 解决方案不是强行隐藏 overflow-x，而是留出缓冲：把容器宽度设为 1180px 或把断点调到 1220px
2. 更稳妥的做法是参考 Bootstrap 原逻辑：它的 xl 断点是 1200px，但默认 max-width 是 1140px，中间留了 60px 缓冲
3. 设计稿标 1200px，实际实现建议设为 max-width: 1180px，避免滚动条干扰