<p>直接用 px-* 工具类最安全，它只控制左右内边距、不影响上下节奏和居中逻辑；全局修改须通过 SCSS 变量 $container-padding-x 并重新编译，CDN 用户无效；切勿手动设置 margin，否则破坏 auto 居中。</p>
直接用 px-* 工具类最安全
bootstrap 5 的 .container 默认不设左右 padding，但你看到的“内边距”往往来自父级（如 body）或你自己加的类。真要控制容器内容离边缘的距离，px-* 是首选——它只改左右，不影响上下节奏，也不破坏居中逻辑。
常见错误是写 padding: 0 1.5rem，结果把上下也清掉了；或者用 p-3 想调左右，却顺手把顶部和底部也撑开了。
-
px-0→padding-left: 0; padding-right: 0 -
px-2→padding-left: 0.5rem; padding-right: 0.5rem（即 8px） -
px-md-4→ 小屏无效果，≥768px 时生效为1.5rem
响应式场景下，别指望单个变量搞定所有断点——工具类才是设计本意。
想全局改？必须走 SCSS 编译流程
$container-padding-x 是 SCSS 变量，不是 CSS 属性。它只在你用 sass 命令重新编译 Bootstrap 源码时才生效。CDN 引入的 bootstrap.min.css 完全无视这个变量。
常见踩坑：
- 在自己的 CSS 文件里写
$container-padding-x: 0.5rem;→ 毫无作用，浏览器不认识 SCSS 语法 - 改了
node_modules/bootstrap/scss/_variables.scss却没运行sass构建 → 修改根本没进输出文件 - 漏掉
@import "bootstrap/scss/functions"等前置依赖 → 变量未定义，编译失败或静默忽略
正确做法：在你项目的主 SCSS 入口文件顶部先覆盖再导入：
$container-padding-x: 0.75rem;<br>@import "bootstrap/scss/bootstrap";
别碰 margin，否则容器立刻偏左
.container 居中靠的是 margin-left: auto; margin-right: auto。只要你在 CSS 里显式写了 margin-left: 20px 或 mx-2，浏览器就放弃自动计算，容器必然偏移——不是“看起来没居中”，是布局引擎彻底失效。
真正该动的是内部留白：
- 内容太贴边？加
px-3到.container上 - 某段文字需要额外呼吸感？给
<p>加ps-4（start padding，兼容 RTL） - 整块区域要全宽背景？删掉
.container，换用语义化 wrapper，比如<div class="hero-section">
g-0 和 px-0 不是一回事
很多人以为 px-0 能解决列间距问题，结果发现方形容器还是对不齐。这是因为栅格系统的 gutter 由 .row 的负 margin 和 .col-* 的正 padding 共同构成，单清 padding 会打破抵消关系。
正确做法：
- 要清整行水平间隙 → 给
.row加gx-0（推荐）或g-0 - 要清单个容器左右内边距 → 给那个
<div>加px-0 - 嵌套
.row时，记得子.col也要配p-0，否则固定宽高的.square-container会被 padding 挤变形
最常被忽略的点：box-sizing 默认是 content-box。如果你给元素设了 width: 220px 又加 padding，实际宽度就超了——统一加 box-sizing: border-box 才能按预期算尺寸。
