应使用 px- 类或修改 $container-padding-x 变量来安全调整容器内边距，避免直接修改 margin 破坏居中；px- 支持响应式断点，ps/pe 可实现左右不对称留白，container-fluid 配合 px-0 适合全宽场景。
直接改 .container 的 margin 会破坏居中
Bootstrap 5 的 .container 居中靠的是 margin-left: auto 和 margin-right: auto。你只要给它加一句 margin-left: 1rem 或写个 mx-3，左边就固定了，右边还在算 auto —— 结果不是“偏一点”，是整个容器在不同断点下错位不一致。
常见错误现象：
- DevTools 里手动改
margin看着正常，切屏或刷新后突然贴左 - 写了
mx-auto想“再居中一次”，但没效果（因为已经margin: auto，再设一遍无变化） - 用
!important覆盖却没加对选择器，比如只写了div.container，而 Bootstrap 用的是.container，优先级不够
用 px-* 工具类安全加内边距
px-* 是专为容器内容留白设计的，不影响居中逻辑，还支持响应式断点。
-
px-0→padding-left: 0; padding-right: 0 -
px-3→padding-left: 1rem; padding-right: 1rem（即 16px） -
px-md-4→ 仅在 ≥768px 断点生效，小屏仍用默认（无类） - 想左右不对称？用
ps-2 pe-4（ps/pe替代旧版pl/pr，兼容 RTL）
示例：<div class="container px-4 px-lg-5">...</div>
全局改左右内边距：改 SCSS 变量 $container-padding-x
如果你项目是源码编译（非 CDN 引入），且所有容器都要统一加内边距，改变量比每个地方加类更干净。
- 变量名是
$container-padding-x，不是--bs-gutter-x（后者只影响.row列间距） - 必须在 Bootstrap 源码导入前定义，例如：
$container-padding-x: 1.5rem; - 改完要重新编译 CSS，CDN 项目无法走这条路
- 注意：这个变量不会影响
.container-fluid，它默认自带padding-left/right: 15px
想彻底去边距？别碰 margin，用 px-0 或 container-fluid
所谓“去掉左右边距”，本质是让内容紧贴视口边缘。这时候最稳妥的做法不是清 margin，而是控制 padding。
<div class="container px-0"> → 清除内边距，保留居中和响应式宽度 <li><code><div class="container-fluid px-0"> → 全宽 + 零内边距（适合 Banner、全屏组件） <li>避免混用 <code>px-0和mx-auto，后者在container-fluid上无意义- 如果用了
container-fluid却发现左右还有空隙，检查父元素（如body）是否自带margin或padding
真正容易被忽略的，是改了某处 padding 后没验证所有断点下的视觉节奏——比如 px-3 在 xs 下显得太松，而在 xl 下又太紧。响应式留白不是设一次就完事，得真看设备切换。
