改$container-padding-x无效，因其仅接受单值且不生成媒体查询；应使用px-*响应式工具类组合，如px-2 px-md-4 px-xl-5，多类共存、按断点生效，单位为rem，需在临界值验证。
为什么改 $container-padding-x 没用
这个 SCSS 变量只接受单值（比如 1.25rem），编译后所有断点共用同一左右内边距，不生成媒体查询。你改了变量但没重新编译 SCSS，或用 CDN 引入，页面完全不会响应——这不是 bug，是设计使然。
怎么用 px-* 工具类实现响应式内边距
Bootstrap 5 原生响应式 padding 完全依赖工具类生成的媒体查询规则，px-2、px-md-4、px-xl-5 这类写法才是正解：
-
px-2：在min-width: 0（即所有尺寸）生效，作为兜底值 -
px-md-4：仅当视口 ≥768px 时生效，覆盖更小断点的设定 -
px-xl-5：仅当视口 ≥1200px 时生效，需确认项目启用了xl断点（默认启用） - 多个类可共存：
class="container px-1 px-md-3 px-xl-5"表示「xs: 0.25rem → md: 0.75rem → xl: 1.5rem」 - 顺序无关紧要，生效与否只看当前视口是否满足对应断点条件
常见踩坑点：写了类却没生效
看似加了响应式类，但 DevTools 里 padding 没变，往往卡在这几个环节：
- 混用
px-0和px-md-3：后者会覆盖前者（CSS 层叠顺序），别写成px-0 px-md-3，应写成px-md-3单独控制中屏及以上 - 误用断点：写了
px-sm-0却指望手机端（≤575px）也生效——sm是从 576px 起，手机端属于xs，根本不会匹配 - 只在桌面端验证：断点切换是开关式生效，必须手动停在 575px、767px、991px 这些临界值附近检查，否则漏掉跳变或回退异常
- 给
.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-5→ 3rem（48px）
这些档位由 $spacers 预设，无法在 HTML 中动态调整；若需精确像素值（如 20px），必须自定义 CSS 或重编译 SCSS。
px-md-* 类在 767px 和 768px 之间那 1px 的差异，往往就是布局错位的根源。
