bootstrap 5 响应式左右内边距必须通过 px-* 工具类叠加实现，如 px-2 px-md-4 px-xl-5，分别在 xs（≤575px）、md（≥768px）、xl（≥1200px）断点生效，单位为 rem（px-2=0.5rem=8px），无前缀类为兜底值，多类共存且按媒体查询条件触发，非层叠顺序决定。
px-*类怎么组合才能生效
Bootstrap 5 的响应式左右内边距只能靠 px-* 工具类叠加实现，不是“一个类搞定”，而是多个断点类共存、按视口宽度自动切换。比如 px-2 px-md-4 px-xl-5 表示：xs（≤575px）用 0.5rem（8px），md（≥768px）升到 1.5rem（24px），xl（≥1200px）再升到 3rem（48px）。
这些类互不覆盖，靠媒体查询条件触发，不是层叠顺序决定谁赢——px-xl-5 写在前面或后面都一样；只要当前视口满足 min-width: 1200px，它就生效。
-
px-*（无前缀）是兜底值，从 xs 断点起生效 -
px-sm-*从 576px 起，px-md-*从 768px 起，以此类推 - 写了
px-sm-0但手机端没反应？因为手机是 xs（≤575px），根本匹配不到 sm - 别混用
px-0和px-md-3——前者在 xs 生效，后者在 md 及以上覆盖，逻辑清晰，不用删旧类
单位和数值怎么对应实际像素
所有 px-* 类单位是 rem，默认根字体大小为 16px，所以数值换算固定：
-
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）
你不能写 px-16 或 px-20px，这类类名不存在，浏览器直接忽略。若真要 20px，要么选最接近的 px-4（24px），要么自定义 CSS 或重编译 SCSS。
为什么改 $container-padding-x 没用
这个 SCSS 变量只接受单个值，比如 $container-padding-x: 1.25rem，编译后所有断点（xs/sm/md/lg/xl）全用同一数值，不生成任何媒体查询。你改了但页面没变化，大概率是因为：
- 用了 CDN 引入的 CSS 文件，变量压根没参与编译
- 改了变量但没重新运行
sass编译流程 - 在普通 CSS 文件里误写了
$container-padding-x，语法错误被浏览器跳过
即使编译成功，它也做不到“小屏紧凑、大屏宽松”——这是设计限制，不是配置遗漏。
手动写 CSS 容易踩哪些坑
直接给 .container 写 padding-left: 1rem 看似简单，但会破坏整个响应链：
- 它全局生效，所有断点都套用同一值，响应式逻辑彻底失效
- 如果 HTML 同时有
px-md-4，你的 CSS 很可能被覆盖——因为.px-md-4选择器比.container更具体 - 写
padding: 0 1rem会把上下 padding 清零，段落垂直间距可能崩掉 - 真要用自定义样式，必须提高权重，例如：
.container.px-custom { padding-left: 0.75rem !important; }，再配合 HTML 中class="container px-custom"
真正容易被忽略的，是断点切换那 1px 的临界点——比如 767px 和 768px 之间，padding 值会开关式跳变，不手动停在这几个边界验证，问题永远藏在上线后。
