<p>Bootstrap 5 不支持 --bs-padding 等 CSS 变量，容器左右内边距由 SCSS 变量 $container-padding-x 控制，仅在 Sass 编译时生效；CDN 用户须用 px-* 工具类实现响应式内边距。</p>
Bootstrap 5 没有名为 --bs-padding 或 --bs-container-padding 的 CSS 变量，直接修改这类变量完全无效——它压根不存在于官方源码中。
为什么改 --bs-xxx-padding 没反应
常见错误是看到其他框架用 CSS 变量控制 padding，就以为 Bootstrap 5 也一样。但 Bootstrap 5 的容器左右内边距由 SCSS 变量 $container-padding-x 控制，且仅在 Sass 编译时注入为静态 CSS；它的运行时样式不读取任何 --bs-* padding 类型的 CSS 变量。
- 你在
:root里写--bs-container-padding: 1rem→ 浏览器会保存该变量，但 Bootstrap 的 CSS 规则里没有任何地方var(--bs-container-padding) - 检查 DevTools 的 Computed 面板，
padding-left值来自媒体查询生成的类（如.container在min-width: 576px下的padding-right: 15px），不是 CSS 变量计算结果 - CDN 用户试图靠 JS 动态设置
document.documentElement.style.setProperty('--bs-...', '...')→ 依然无效，因为无对应消费逻辑
$container-padding-x 是唯一可控入口（仅限 Sass 项目）
这个 SCSS 变量定义在 _variables.scss 中，决定所有断点下 .container 的左右内边距，默认值 1.5rem。但它只在你参与编译流程时才起作用。
- 必须在导入 Bootstrap 主文件前重定义：
$container-padding-x: 0.75rem;放在你自己的app.scss开头，再@import "bootstrap/scss/bootstrap"; - 改完后必须运行
sass app.scss:app.css或启动构建工具（如 Webpack/Vite 的 Sass loader），否则修改不会出现在输出 CSS 中 - 它不支持响应式分断点设置（比如 xs 下 0.5rem、xl 下 2rem）——真要分断点，只能放弃该变量，改用工具类
-
.container-fluid不受$container-padding-x影响，它默认自带padding-left/right: 15px（硬编码，非变量）
响应式内边距只能靠 px-* 工具类组合
这是 CDN 用户和无构建环境项目的事实标准，也是 Sass 项目中做局部微调的首选方式。它不依赖变量，直接生成带媒体查询的 CSS 规则。
立即学习“前端免费学习笔记（深入）”；
-
px-0：清除所有断点下的左右内边距（安全，保留上下 padding） -
px-md-3 px-xl-5：md 断点起用1rem，xl 起用3rem，中间断点自动继承上一档 - 别用
p-0替代px-0：前者清掉上下 padding，常导致与.navbar或.footer对齐错位 - 工具类优先级高于 Bootstrap 默认规则，无需
!important，也不破坏断点逻辑
最容易被忽略的点
很多人花时间调试 $container-padding-x 或伪造 CSS 变量，却忘了验证实际效果是否跨断点一致——比如 px-4 在 xs 下留白过大，在 xl 下又显得局促；而改了 $container-padding-x 后，没同步检查 .container-fluid 是否意外多出空隙（它有自己的 padding 行为）。真正需要调整的，往往不是“容器内边距”，而是内容区与视口边缘的视觉节奏，这时用 .container-fluid px-0 + 自定义 wrapper 更直接。
