bootstrap 5 中 $container-padding-x 不支持响应式，因其仅接受单一固定值且不生成媒体查询；必须使用 px-* 工具类（如 px-2、px-md-3）实现断点级左右内边距控制。
bootstrap 5 中无法用单个变量实现响应式内边距，必须用带断点前缀的 px-* 工具类组合控制不同分辨率下的左右 padding。
为什么 $container-padding-x 不支持响应式
这个 SCSS 变量只接受一个固定值（如 $container-padding-x: 1.25rem），编译后所有断点共用同一 padding。它不识别 @media，也不生成断点相关 CSS。你在 DevTools 里看到的 .container 的 padding 在 xs/sm/md/lg 下始终一致，就是这个原因。
- 改了变量但没重新编译 SCSS → 页面完全没变化
- 用 CDN 引入 bootstrap.min.css → 变量定义根本不会被读取
- 试图写
$container-padding-x: 0.5rem !default;在 CSS 文件里 → 语法错误，浏览器直接忽略
怎么用 px-* 工具类设置不同断点的左右内边距
这是 Bootstrap 5 唯一原生支持、无需构建、开箱即用的响应式方案。每个类只在对应断点及以上生效，小屏自动回退到上一级或默认值。
-
px-2：超小屏（ -
px-md-4：≥768px 生效，左右 padding = 1.5rem（24px） -
px-xl-5：≥1200px 生效，左右 padding = 3rem（48px） - 可叠加：
class="container px-2 px-md-4 px-xl-5"，顺序无关，权重靠类名 specificity 而非书写顺序
注意：xxl 断点默认未启用，若项目未自定义断点，px-xxl-0 不会生效。
常见错误：混用、覆盖、漏验
看似写了响应式类，但实际没生效，往往卡在这几个环节：
- 写了
px-0 px-md-3，但同时又在全局 CSS 里写了.container { padding-left: 1rem; }→ 后者无断点、无 specificity 优势，会被工具类覆盖，但开发者误以为“自己写的没起作用” - 用了
px-sm-0却发现手机端也没 padding → 实际是误用了sm（768px 起），而手机是 xs（ - 改完后只在桌面端验证，没手动拖动浏览器宽度或切设备模拟器 → 断点切换时 padding 突变、错位、留白消失等现象只在临界尺寸才暴露
- 在
.container上加了px-3，但内部.row依赖容器 padding 抵消自身负 margin；若你又给.row加了p-0，可能导致列内容贴边甚至溢出
真正容易被忽略的是：断点切换不是平滑过渡，而是媒体查询开关式生效。padding 值会在 min-width 达到瞬间跳变，所以必须在每个断点边界（576px、768px、992px、1200px、1400px）手动停顿验证 computed 样式，不能只看“大屏正常”。
