Bootstrap 5 间距工具类默认单位是 rem，如 px-3 表示 1rem（16px），数值由 $spacers 变量预设，不支持 px-16 等自定义像素类；响应式需组合断点类（如 px-2 px-md-4 px-xl-5）；若需精确 px 值，须自定义 CSS 或重编译 SCSS。
容器内边距单位是 rem，不是 px
bootstrap 5 的所有间距工具类（px-*、py-*、ps-* 等）默认单位是 rem，基于根字体大小（font-size: 16px 默认），所以 px-3 实际等于 padding-left: 1rem; padding-right: 1rem → 即 16px。你不能通过类名直接写成 px-16 或 px-20px，那会无效。
-
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 中动态改数值，只能选预设档位。
响应式断点下怎么指定不同数值
不能靠一个类实现“随分辨率线性变化”，但可以组合多个断点类，让不同宽度区间用不同档位的 rem 值。
- 小屏（
xs，min-width: 0）用px-2（8px） - 中屏（
md，≥768px）升级为px-md-4（24px） - 超大屏（
xl，≥1200px）再升为px-xl-5（48px）
写法：<div class="container px-2 px-md-4 px-xl-5">
<p>注意：这些类互不覆盖，而是按媒体查询条件分别生效；没写的断点会回退到更小断点或无类状态，不会继承上级值。</p>
<h3>想用 px 而不是 rem？只能自定义 CSS</h3>
<p>Bootstrap 工具类不提供 <code>px-12 这种精确像素类。若必须用 px（比如设计稿严格要求 12px 左右内边距），有两种安全方式：
- 写自定义类，放在 Bootstrap CSS 之后加载：
.container-px12 { padding-left: 12px !important; padding-right: 12px !important; } - 用 SCSS 重定义
$spacers，把1档设为0.75rem（即 12px），再编译——但会影响所有p-*类，需全局评估
别试图用 style="padding: 0 12px" 写在 container 上：它会破坏响应式断点类的层叠逻辑，且无法适配 RTL（ps/pe）。
容易被忽略的兼容细节
真正出问题的往往不是数值本身，而是断点匹配和方向语义：
-
ps-3和pe-3是 RTL 安全的（ps= start，pe= end），比旧版pl-3/pr-3更可靠，尤其多语言项目 - 写了
px-lg-4却在 lg 断点没生效？检查视口是否真 ≥992px，且父容器没限制宽度（比如max-width: 900px） - 移动端调试时横屏模拟大屏，但真实用户极少横屏操作导航——务必切回竖屏验证小屏效果
改完任意一个断点的内边距，都要手动拖动浏览器宽度，逐个验证 xs/sm/md/lg/xl 下的视觉节奏是否一致，尤其注意文字行高与留白的比例关系。
