bootstrap 5 中无法通过 $container-padding-x 变量实现响应式内边距，必须使用带断点前缀的 px-* 工具类（如 px-2、px-md-4、px-xl-5）组合设置不同屏幕下的左右内边距，因其依赖媒体查询规则且可共存生效。
直接改 $container-padding-x 变量做不到响应式
这个变量只接受单个值，比如 $container-padding-x: 1.5rem，编译后所有断点（xs、sm、md、lg、xl）都用同一左右内边距。它不生成媒体查询，没法随屏幕宽度切换数值。如果你项目走 SCSS 编译流程，改它只适合「全局统一」场景；一旦需要小屏紧凑、大屏宽松，这条路就失效。
必须用带断点前缀的 px-* 工具类组合
Bootstrap 5 的响应式内边距完全依赖工具类生成的媒体查询规则，px-2、px-md-4、px-xl-5 才是唯一可靠方案：
-
px-2：在所有尺寸（min-width: 0）生效，作为兜底值 -
px-md-4：仅当视口 ≥768px 时生效，覆盖更小断点的设定 -
px-xl-5：仅当视口 ≥1200px 时生效，需确认项目启用了xl断点（默认启用） - 多个类可共存：
class="container px-1 px-md-3 px-xl-5"表示「xs: 0.25rem → md: 0.75rem → xl: 1.5rem」 - 顺序无关紧要，生效与否只看当前视口是否满足对应断点条件
别在 .container 上写自定义 padding CSS
手动写 .container { padding-left: 1rem; } 会破坏响应逻辑：
- 和工具类冲突：如果 HTML 同时写了
px-md-4，而你的 CSS 没加!important或更高权重，大概率被工具类覆盖（因为.px-md-4选择器比.container更具体） - 若真要用自定义样式，必须显式提高权重，例如：
.container.px-custom { padding-left: 0.75rem !important; }，再配合class="container px-custom" - 千万别只写
padding: 0 1rem——这会把上下 padding 清零，可能让标题、段落垂直节奏崩掉
验证时重点看断点临界值，不是只盯桌面大屏
改完之后，别只在 1920px 宽度下检查。真正容易出问题的是断点切换附近：
- 用浏览器 DevTools 切换到
575px（刚好低于sm）、767px（刚好低于md）、991px（刚好低于lg），观察内边距是否按预期回退 - 移动端竖屏真实宽度通常 ≤414px，
px-sm-3在这种尺寸下根本不会生效——得靠px-1或更低档位扛住小屏体验 -
xxl断点（≥1400px）需确认项目是否自定义启用了它，默认 Bootstrap 5.3+ 是关闭的
px-md-* 类在 767px 和 768px 之间那 1px 的差异，往往就是布局错位的根源。
