$container-padding-x 是 Bootstrap 5 的 SCSS 变量，定义容器默认左右内边距，默认值 1.5rem，仅在 SCSS 编译时生效；CDN 引入无效，响应式需用 px-* 工具类。
Bootstrap 5 中 $container-padding-x 是什么
它不是 css 属性，而是 scss 变量，定义在 _variables.scss 里，控制所有断点下 .container 的默认左右内边距（即 padding-left 和 padding-right）。默认值是 $container-padding-x: 1.5rem（24px），但注意：这个变量**只在你用 scss 编译 bootstrap 时才生效**——直接引入 cdn 的 css 文件，改这个变量毫无作用。
为什么直接改 $container-padding-x 后页面没变化
常见错误就是把变量写进自己的 CSS 文件里，或者在浏览器开发者工具里修改它。SCSS 变量必须参与编译流程才能转成真实 CSS。如果你没搭 SCSS 环境，那它就只是个注释。
- 你用的是
bootstrap.min.cssCDN？→$container-padding-x完全无效 - 你改了
node_modules/bootstrap/scss/_variables.scss但没重新运行sass命令？→ 修改未编译进输出 CSS - 你用了自定义构建脚本但漏掉了
import "bootstrap/scss/functions"等前置依赖？→ 变量可能被忽略或报错
想全局改容器左右内边距，实际可选的路只有两条
第一种是 SCSS 方式（适合长期维护项目）：在你自己的主 SCSS 文件顶部，先覆盖变量，再导入 Bootstrap：
$container-padding-x: 0.75rem; @import "bootstrap/scss/bootstrap";
第二种是纯 CSS 方式（适合快速上线、无构建环境）：用工具类或自定义类，不碰变量：
- 临时调整：
<div class="container px-3">（<code>px-3=padding-left/right: 1rem） - 全局统一：加一个自定义类
.container-custom { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }，然后所有容器加这个类 - 彻底清空：
px-0是唯一语义清晰、兼容性稳的方式，别用padding: 0（会干掉上下边距）
响应式场景下，$container-padding-x 不起作用
这个变量是“全局单值”，不能按断点分别设。比如你没法让 xs 下是 0.5rem、lg 下是 2rem。真要响应式内边距，只能放弃变量，改用工具类组合：
<div class="container px-2 px-md-4 px-xl-5">
<p>这里 <code>px-2 在超小屏生效，px-md-4 在 ≥768px 生效，px-xl-5 在 ≥1200px 生效——工具类才是 Bootstrap 5 响应式 padding 的事实标准，变量只是给静态定制留的后门。
真正容易被忽略的点：很多团队花时间调 $container-padding-x，结果发现上线后移动端还是太紧，最后还得补一堆 px-sm-* 类——不如一开始就用工具类，省掉编译环节和协作成本。
