改$container-padding-x无效是因为它只在scss编译时生效，cdn引入、未重编译或纯css中误写均导致失效；响应式内边距应使用px-*工具类组合断点前缀（如px-2 px-md-4 px-xl-5），其单位为rem且数值由$spacers预设。
为什么改 $container-padding-x 没用
这个 SCSS 变量只接受单值，比如 $container-padding-x: 1.25rem，编译后所有断点（xs/sm/md/lg/xl）都用同一左右内边距。它不生成媒体查询，也不响应视口变化。你改了但没看到效果，大概率是因为：
– 用了 CDN 引入的 CSS 文件，变量根本不会被读取
– 没重新编译 SCSS，改了等于白改
– 在纯 CSS 文件里误写 $container-padding-x，语法错误直接被浏览器忽略
怎么用 px-* 工具类设置不同分辨率下的具体数值
Bootstrap 5 原生唯一可靠方式是叠加带断点前缀的工具类，它们基于媒体查询自动生效：
-
px-2：从xs（min-width: 0）起生效，作为兜底值（0.5rem / 8px） -
px-md-4：仅当视口 ≥768px 时生效，覆盖更小断点（1.5rem / 24px） -
px-xl-5：仅当视口 ≥1200px 时生效（3rem / 48px），需确认项目启用了xl断点（默认启用）
多个类可共存：class="container px-1 px-md-3 px-xl-5" 表示 xs→0.25rem、md→1rem、xl→1.5rem。顺序无关，生效只看当前视口是否满足对应断点条件。
常见踩坑点：写了类却没生效
看似加了响应式类，但 DevTools 里 padding-left 和 padding-right 没变，通常卡在这几个环节：
- 混用
px-0和px-md-3：后者会覆盖前者（CSS 层叠顺序），应写成px-md-3单独控制中屏及以上 - 误用断点：写了
px-sm-0却指望手机端（≤575px）也生效——sm是从 576px 起，手机属于xs，根本不会匹配 - 只在桌面端验证：断点切换是开关式生效，必须手动停在 575px（刚好低于
sm）、767px（刚好低于md）、991px（刚好低于lg）这些临界值附近检查 - 给
.container手动写padding-left: 1rem：这会全局生效、破坏响应逻辑，且大概率被工具类覆盖（因为.px-md-4选择器权重更高）
单位和数值怎么选才不踩空
Bootstrap 5 所有 px-* 类单位是 rem，基于根字体大小（默认 16px），不可直接写像素值（如 px-16 无效）：
-
px-0→ 0rem（0px） -
px-1→ 0.25rem（4px） -
px-2→ 0.5rem（8px） -
px-3→ 1rem（16px） -
px-4→ 1.5rem（24px） -
px-5→ 3rem（48px）
这些档位由 $spacers 预设，无法在 HTML 中动态调整；若需精确像素值（如 20px），必须自定义 CSS 或重编译 SCSS。
