应使用px-*响应式工具类组合，如px-2 px-md-4 px-xl-5；其数值对应预设rem单位（如px-2=0.5rem=8px），由$spacers定义，不可自定义像素值，且必须叠加生效。
px-* 工具类的数值和单位怎么对应
Bootstrap 5 的 px-* 类单位固定为 rem，不是像素（px），也不支持自定义数值。所有档位由 SCSS 变量 $spacers 预设，不可在 HTML 中写成 px-16 或 px-20px —— 这类写法无效。
常见档位与实际像素换算（基于根字体大小 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）
这些值不能动态调整，只能从中选择；若设计稿要求精确 12px 左右内边距，必须用自定义 CSS 或重编译 SCSS。
怎么组合断点类实现不同分辨率下的左右内边距
唯一可靠方式是叠加多个带断点前缀的 px-* 类，例如：class="container px-2 px-md-4 px-xl-5"。它们互不覆盖，而是由媒体查询按视口宽度分别生效。
-
px-2：在所有尺寸（min-width: 0）生效，作为兜底值 -
px-md-4：仅当视口 ≥768px 时生效，覆盖更小断点的设定 -
px-xl-5：仅当视口 ≥1200px 时生效（默认启用） - 顺序无关紧要，生效与否只取决于当前视口是否满足对应断点条件
- 未声明的断点（如
sm）会沿用上一级或无类状态，不会继承
别写 px-sm-3 期望它在手机端生效——sm 从 576px 起，≤575px 属于 xs，得靠无前缀类（如 px-1）扛住真实小屏（通常 ≤414px）。
为什么改 $container-padding-x 变量不生效
这个 SCSS 变量只接受单值，比如 $container-padding-x: 1.25rem，编译后所有断点共用同一左右内边距，不生成任何媒体查询。它根本不是响应式方案。
- 用 CDN 引入
bootstrap.min.css→ 变量完全被忽略 - 在普通 CSS 文件里写
$container-padding-x: 0.5rem→ 语法错误，浏览器直接丢弃 - 改了
node_modules里的变量但没重新运行sass编译 → 输出 CSS 没变化 - 漏掉
@import "bootstrap/scss/functions"等前置依赖 → 编译失败或静默失效
真要全局统一改，必须在你项目的主 SCSS 入口顶部先覆盖再导入：$container-padding-x: 0.75rem; @import "bootstrap/scss/bootstrap";，且仅对编译项目有效。
手动写 .container { padding-left: 1rem; } 为什么危险
这样写会破坏响应逻辑：它全局生效，所有断点都强制使用相同值，且大概率被工具类覆盖（因为 .px-md-4 选择器比 .container 更具体）。
- 写了
padding: 0 1rem→ 上下 padding 清零，标题、段落垂直节奏可能崩掉 - 如果同时用了
px-md-4，又没加!important或更高权重，你的样式会被覆盖 - 若真要用自定义 CSS，请显式提高选择器权重，例如：
.container.px-custom { padding-left: 0.75rem !important; }，再配合class="container px-custom" - 千万别只调左右 padding 却忽略上下影响——
px-*和py-*是解耦设计，混用需谨慎
最容易被忽略的，是断点临界值验证：改完之后，必须停在 575px、767px、991px 这些边界宽度下检查，而不是只看 1920px 大屏——那 1px 的切换差异，往往就是布局错位的根源。
