--bs-gutter-x 仅控制 .row 内列间水平间距，不影响 .container 内边距；响应式容器左右内边距须用 px-* 工具类组合（如 px-1 px-md-3 px-xl-5），scss 变量 $container-padding-x 不支持断点响应式。
Bootstrap 5 的 --bs-gutter-x 不控制容器内边距
很多人误以为改 --bs-gutter-x 能调整 .container 左右留白，其实它只作用于 .row 内部列之间的水平间距（gutter），和容器本身的 padding 完全无关。你在 :root 里设 --bs-gutter-x: 2rem，.container 的左右内边距依然为 0（默认值），除非你额外加 px-* 类或自定义样式。
想响应式控制容器左右内边距，只能用 px-* 工具类组合
Bootstrap 5 没有暴露类似 --bs-container-padding-x 的 CSS 变量，$container-padding-x 是 SCSS 层变量，编译后生成的是静态 CSS，不带媒体查询。真要按断点切换数值，必须用工具类：
-
px-2：所有尺寸生效（min-width: 0），作为兜底值 -
px-md-4：仅当视口 ≥768px 时生效，覆盖更小断点的设定 -
px-xl-5：仅当视口 ≥1200px 时生效，需确认项目启用xl断点（默认启用） - 多个类可共存：
class="container px-1 px-md-3 px-xl-5"，顺序无关，生效取决于当前视口是否满足断点条件
手动写 CSS 响应式规则容易被工具类覆盖
如果你在自己的 CSS 文件里写：
@media (min-width: 768px) {
.container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
大概率失效，原因有二：
-
.px-md-4的选择器比.container更具体，权重更高 - Bootstrap 5.3+ 默认启用了
$enable-important-utilities: true，工具类自带!important（部分版本） - 断点像素值必须严格匹配 Bootstrap 版本：v5 是
768px（md）、992px（lg）、1200px（xl），抄错一个就错位
SCSS 编译项目里改 $container-padding-x ≠ 响应式
这个变量只接受单个值，比如 $container-padding-x: 0.75rem，编译后所有断点都用这个值。它不生成媒体查询，没法实现「小屏紧凑、大屏宽松」的效果。真正容易被忽略的是：很多团队花时间调这个变量，上线后发现移动端还是太紧，最后还得补一堆 px-sm-* 类——不如一开始就用工具类，省掉编译环节和协作成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
