px-工具类是设置响应式内边距的唯一有效方式；直接修改$container-padding-x变量无法实现响应式，因其仅支持单值且不生成媒体查询，而px-类通过预编译媒体查询按断点生效。
px-* 工具类才是设置响应式内边距的唯一有效方式
直接改 $container-padding-x 变量做不到响应式——它只接受单值，编译后所有断点（xs/sm/md/lg/xl）都用同一左右内边距，不生成任何媒体查询。你写了 $container-padding-x: 1.5rem 却没看到效果，大概率是因为用了 CDN、没重新编译 SCSS，或误把变量写进 CSS 文件导致语法错误被浏览器忽略。
真正起作用的是 Bootstrap 5 原生提供的 px-* 类，它们背后是预编译好的媒体查询规则，按断点条件生效：
-
px-2：从min-width: 0（即所有尺寸）起生效，作为兜底值 -
px-md-4：仅当视口 ≥768px 时生效，覆盖更小断点的设定 -
px-xl-5：仅当视口 ≥1200px 时生效（默认启用）
多个类可共存：class="container px-1 px-md-3 px-xl-5" 表示「xs: 0.25rem → md: 0.75rem → xl: 1.5rem」。顺序无关紧要，生效与否只看当前视口是否满足对应断点条件。
别在 .container 上写自定义 padding CSS
手动写 .container { padding-left: 1rem; } 会破坏响应逻辑：
- 和工具类冲突：如果 HTML 同时写了
px-md-4，而你的 CSS 没加!important或更高 specificity，大概率被.px-md-4覆盖（后者选择器权重更高） - 若真要用自定义样式，必须显式提高权重，例如：
.container.px-custom { padding-left: 0.75rem !important; }，再配合class="container px-custom" - 千万别只写
padding: 0 1rem——这会把上下 padding 清零，可能让标题、段落垂直节奏崩掉
单位和数值档位由 $spacers 预设，不能动态写像素值
Bootstrap 5 所有 px-* 类单位是 rem，基于根字体大小（默认 16px），不可在 HTML 中直接写像素值（如 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）
这些档位由 SCSS 变量 $spacers 定义，无法在 HTML 中动态调整；若需精确像素值（如 20px），必须重编译 SCSS 或写自定义 CSS。
验证必须停在断点临界值，不是只看大屏
改完之后，别只在 1920px 下检查。真正容易出问题的是断点切换瞬间：
- 用浏览器 DevTools 切换到
575px（刚好低于 sm）、767px（刚好低于 md）、991px（刚好低于 lg），观察内边距是否按预期回退 - 移动端竖屏真实宽度通常 ≤414px，
px-sm-3在这种尺寸下根本不会生效——得靠px-1或无前缀类扛住小屏体验 -
xxl断点（≥1400px）默认未启用，若项目未自定义断点，px-xxl-0不会生效
真正容易被忽略的，是改了某处内边距后没在断点边界反复切屏验证——尤其 px-md-* 类在 767px 和 768px 之间那 1px 的差异，往往就是布局错位的根源。
