直接改 $container-padding-x 变量不生效，因其仅接受单值且不生成媒体查询；应使用 px-* 响应式工具类组合，如 px-2 px-md-4 px-xl-5，并避免手动写 css 覆盖响应逻辑。
直接改 $container-padding-x 变量不生效
这个 SCSS 变量只接受单值，比如 $container-padding-x: 1.25rem，编译后所有断点（xs/sm/md/lg/xl）都用同一左右内边距。它不生成媒体查询，也不响应视口变化。你改了但没看到效果，大概率是因为：用了 CDN 引入、没重新编译 SCSS、或在 CSS 文件里误写 $container-padding-x 导致语法错误被浏览器忽略。
必须用带断点前缀的 px-* 工具类组合
Bootstrap 5 原生支持的唯一可靠方式是叠加使用 px-* 类，它们基于媒体查询自动生效：
-
px-2：从xs（0px）起生效，作为兜底值 -
px-md-4：仅当视口 ≥768px 时生效，覆盖更小断点的设定 -
px-xl-5：仅当视口 ≥1200px 时生效（默认启用） - 可共存：
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或更高 specificity，大概率被.px-md-4覆盖（后者选择器权重更高） - 若真要用自定义样式，必须显式提高权重，例如：
.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）默认未启用，若项目未自定义断点，px-xxl-0不会生效
