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…）都用同一个左右内边距。它不是媒体查询驱动的，没法按分辨率切换数值。如果你项目是 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或px-2扛住小屏体验 - 如果用了
xxl断点（≥1400px），要确认项目是否自定义启用了它，默认 Bootstrap 5.3+ 是关闭的
