$container-padding-x变量不支持响应式，因其仅接受单值且无媒体查询；必须使用px-*工具类组合（如px-2 px-md-4 px-xl-5）才能按断点生效。
直接改 $container-padding-x 变量无法实现响应式内边距，它只接受单值，编译后所有断点共用同一左右 padding；必须用带断点前缀的 px-* 工具类组合（如 px-2 px-md-4 px-xl-5）才能真正按分辨率生效。
为什么 $container-padding-x 改了也没用
这个 SCSS 变量设计上就不支持响应式：你设成 $container-padding-x: 1.5rem，编译出的 CSS 里所有断点（xs/sm/md/lg/xl）都用 1.5rem，没有媒体查询。常见失效原因包括：
– 用 CDN 引入 Bootstrap，根本没走 SCSS 编译流程
– 修改变量后没重新构建 CSS 文件
– 在纯 CSS 文件里误写 $container-padding-x，浏览器直接忽略语法错误
– 项目启用了自定义断点但没同步更新 $container-max-widths，导致变量引用错位
必须用 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 时生效（默认启用，但需确认未被项目禁用）
– 多个类可共存：class="container px-1 px-md-3 px-xl-5" 表示 xs→0.25rem，md→0.75rem，xl→1.5rem
– 类顺序无关紧要，生效与否只看当前视口是否满足对应断点条件
容易踩的坑：写了类却没看到效果
看似加了响应式类，但 DevTools 里 padding-left 没变，通常卡在这几个环节：
– 漏写基础类：比如只写 px-md-3，小屏下无任何规则接管，padding 回退到浏览器默认（可能为 0）
– 断点误判：写了 px-sm-0 却指望手机竖屏（≤414px）生效——sm 断点从 576px 起，手机属于 xs，必须靠 px-0 或 px-1 扛住
– 混用冲突类：比如 px-0 px-md-3，小屏下 px-0 生效，中屏下 px-md-3 覆盖，但若中间漏了 sm/lg，某些宽度下会意外回退到默认值
– 验证方式错误：只在 1920px 下检查，却没停在 575px（刚好低于 md）、767px（刚好低于 lg）等临界值观察跳变
别手动给 .container 写 padding CSS
直接写 .container { padding-left: 1rem; } 会破坏响应逻辑：
– 全局生效，无法随屏幕缩放，小屏也强制 1rem，失去移动优先意义
– 和工具类冲突：因为 .px-md-4 选择器比 .container 更具体，你的 CSS 很大概率被覆盖（除非加 !important 和更高权重）
– 若真要用自定义样式，必须显式提高选择器强度，例如：.container.px-custom { padding-left: 0.75rem !important; }，再配合 class="container px-custom"
– 千万别只写 padding: 0 1rem——这会把上下 padding 清零，可能让标题、段落垂直节奏崩掉
真正容易被忽略的是断点切换那 1px 的临界行为：比如 px-md-4 在 767px 时完全不生效，768px 突然跳变，没在 DevTools 里手动拖拽宽度反复验证，就很难发现布局错位的根源。
