<p>Bootstrap 5 中唯一能设置不同分辨率下容器左右内边距具体数值的方法是使用带断点前缀的 px-* 工具类（如 px-2、px-md-4、px-xl-5）组合，因其基于媒体查询生成响应式规则，而 $container-padding-x 变量仅支持单值且不生成断点样式。</p>
px-* 工具类是唯一能设不同分辨率下具体数值的写法
Bootstrap 5 不支持用单个变量（如 $container-padding-x）实现响应式内边距，因为该变量只接受一个值，编译后所有断点共用同一数值，不生成任何媒体查询。你看到的“不同分辨率下不同 padding”，只能靠叠加多个带断点前缀的 px-* 类来达成。
这些类对应预设的 rem 档位，不是像素值，但可换算：
px-1 → 0.25rem = 4px
px-2 → 0.5rem = 8px
px-3 → 1rem = 16px
px-4 → 1.5rem = 24px
px-5 → 3rem = 48px
-
px-2在所有尺寸（min-width: 0）生效，作为兜底 -
px-md-4仅当视口 ≥768px 时生效，覆盖更小断点 -
px-xl-5仅当视口 ≥1200px 时生效（默认启用） - 多个类可共存：
class="container px-2 px-md-4 px-xl-5"，顺序无关
别在 .container 上直接写 padding CSS
手动写 .container { padding-left: 1rem; } 会破坏响应逻辑：它全局生效，无法随断点收缩或放大；且大概率被工具类覆盖——因为 .px-md-4 的选择器权重比 .container 高。
- 若真要用自定义样式，必须提高 specificity：
.container.px-custom { padding-left: 0.75rem !important; }，再配合class="container px-custom" - 千万别只写
padding: 0 1rem——这会把上下 padding 清零，可能让标题、段落垂直节奏崩掉 -
.container-fluid默认有padding-left: 15px，但不受$container-padding-x影响
验证时必须停在断点临界值附近
改完之后，不能只看桌面大屏。真正容易出问题的是断点切换瞬间，比如：
- 用 DevTools 切换到
575px（刚好低于sm），确认是否回退到px-2值 - 停在
767px（刚好低于md），检查px-md-4是否尚未触发 - 移动端竖屏真实宽度通常 ≤414px，
px-sm-3在这种尺寸下根本不会生效——得靠无前缀的px-1或px-2扛住小屏体验 -
xxl断点（≥1400px）默认未启用，如果项目没自定义，px-xxl-0无效
单位和数值不可动态写，只能选预设档位
Bootstrap 5 所有 px-* 类单位固定为 rem，由 SCSS 变量 $spacers 预设，不支持 HTML 中写 px-16 或 px-20px 这类自定义像素类——它们会完全无效。
- 需要精确像素值（如 20px）？只能走两条路：自定义 CSS（加
!important+ 更高 specificity），或重编译 SCSS 并修改$spacers -
clamp()虽然能实现连续变化（如--card-padding: clamp(0.5rem, 1.2rem + 2vw, 2.5rem)），但它不适用于.container的左右内边距控制——因为.container的宽度本身是 max-width 驱动的，clamp()在这里容易和布局逻辑冲突 - 不要试图用 CSS 自定义属性（如
--bs-container-padding-x）覆盖——Bootstrap 5 源码没暴露这个 CSS 变量，仅 SCSS 层可用
