bootstrap 5 响应式容器内边距只能用 px-* 工具类组合实现，因 $container-padding-x 仅支持单值且不生成媒体查询；需叠加如 px-2（兜底）、px-md-4（≥768px）、px-xl-5（≥1200px）等类，按视口宽度激活对应规则。
响应式容器内边距只能用 px-* 工具类组合实现
Bootstrap 5 不支持通过 $container-padding-x 变量设置响应式内边距，它只接受单值（如 1.25rem），编译后所有断点共用同一数值，不生成任何媒体查询。你看到的“不同分辨率不同 padding”，必须靠叠加多个带断点前缀的 px-* 类来达成。
这些类本质是预编译好的媒体查询规则：px-2 在 min-width: 0 生效，px-md-4 在 min-width: 768px 生效，px-xl-5 在 min-width: 1200px 生效——它们互不覆盖，只按当前视口宽度激活对应规则。
-
px-0→ 左右 padding 全清零（仅限左右，不影响上下） -
px-2→ 左右各0.5rem（即 8px，默认根字体 16px） -
px-md-4→ ≥768px 时左右各1.5rem（24px） - 多个类可共存：
class="container px-1 px-md-3 px-xl-5"
别写 px-sm-0 期望它在手机上生效
sm 断点起始值是 576px，而真实手机竖屏宽度普遍 ≤414px（iPhone 14 Pro 是 393px，Pixel 7 是 412px）。这意味着 px-sm-0 在绝大多数手机上根本不会触发，它只管 ≥576px 的设备（比如小平板、折叠屏横屏、或大屏手机横屏）。
真正兜底小屏的，是无前缀类：px-0、px-1、px-2。它们从 0px 就开始生效，是移动端实际起效的起点。
- 错误写法：
px-sm-0（手机竖屏看不到效果） - 正确写法：
px-1 px-md-0（小屏留 4px，≥768px 清零） - 别混用
px-0和px-md-0：后者会覆盖前者，因为 CSS 层叠按选择器权重，不是书写顺序 - 验证时停在
575px（刚好低于sm），确认是否回退到px-1值
手动写 .container { padding-left: 1rem } 会破坏响应逻辑
这种写法全局生效，无法随断点收缩或放大；更关键的是，它大概率被工具类覆盖——因为 .px-md-4 的选择器权重高于 .container。即使你加了 !important，也会让后续响应式控制彻底失效。
- 若真要用自定义样式，必须提高 specificity：
.container.px-custom { padding-left: 0.75rem !important; }，再配合 HTML 中class="container px-custom" - 千万别只写
padding: 0 1rem：这会把上下 padding 也清成 0，可能让标题、段落垂直节奏崩掉 -
.container-fluid默认自带padding-left/right: 15px，不受$container-padding-x影响 - CDN 用户改
$container-padding-x完全无效，它只在 SCSS 编译流程中起作用
断点临界值必须手动停顿验证
响应式 padding 是开关式切换，不是渐变过渡。值会在 min-width 达到的那一刻跳变，所以每个断点边界都得手动停顿检查，而不是“写了就完事”。
- 用 DevTools 切到
575px（刚好低于sm），确认px-sm-*还没生效、兜底值仍在 - 切到
767px（刚好低于md），检查是否还沿用sm级设定 - 切到
991px（刚好低于lg），观察px-lg-*是否尚未触发 -
xxl断点（≥1400px）默认未启用，px-xxl-0写了也无效，除非你在 SCSS 中显式启用了它
真正容易被忽略的，是忘记设基础类（如 px-2）——没有它，断点类在小屏下就是空转。
