最安全的方式是用 px- 类调整 .container 的左右内边距；默认为 px-2（15px），常用 px-2/px-3/px-1；响应式需用 px- px-md-* 等组合；切勿直接改 margin 或 padding 简写；真实留白源头常在 body 或外层 wrapper。
直接用 px-* 类改左右内边距最安全
Bootstrap 的 .container 默认左右各 15px 内边距（padding-left/padding-right），这是唯一该动的“留白”——它只影响内容离容器边缘的距离，不破坏居中逻辑，也不碰上下 padding。别写 padding: 0 1rem，那会清掉上下值；也别碰 margin，否则 margin-left: auto 失效，容器立刻偏移。
常用组合：
-
px-2→ 左右各 0.5rem（8px） -
px-3→ 左右各 1rem（16px），比默认略宽，适合强调呼吸感 -
px-1→ 左右各 0.25rem（4px），极简场景可用
示例：<div class="container px-2">...</div>
小屏要留白、大屏想收窄？必须用响应式 px-* 类
Bootstrap 4 没有 px-sm-2 px-lg-1 这种写法（那是 Bootstrap 5+ 的），但你可以用 px-2 px-md-1：前者作用于所有断点（含 xs），后者从 md（≥768px）开始覆盖。注意生效顺序——高断点类会覆盖低断点类，但 xs 没对应类就按 px-2 走。
容易踩的坑：
- 只写
px-md-1→ xs 屏（如 iPhone SE）完全无左右 padding，内容贴边 - 写了
px-0又加px-md-1→ md+ 生效，但 xs 也被清零，同样贴边 - 想保留 xs 留白、md 收窄、xl 彻底清零？得写
px-2 px-md-1 px-xl-0
别给 .container 直接加 mx-* 或手动设 margin
它的居中靠的是 margin-left: auto; margin-right: auto。一旦你加 mx-3 或 margin-left: 10px，auto 就被覆盖，容器在不同断点下偏移量不一致——DevTools 里看着正常，切到平板预览就歪了。
正确做法是套一层 wrapper：
- 想整体左移 20px？给父级加
ms-5（不是给.container） - 想小屏外边距大、大屏小？用
<div class="mx-sm-4 mx-xl-2"><div class="container">...</div></div> - 如果父级是
，直接给body加ps-3 pe-xl-1更干净
真实“留白太大”常不是 .container 的锅
DevTools 里看到 .container 的 padding-left: 15px，不代表它就是源头。更常见的白边来自：
-
上的padding或margin（尤其 CMS 模板自带） - 外层 wrapper div 带了
padding: 0 20px - 你自己或同事写的媒体查询，比如
@media (max-width: 576px) { .container { padding: 0 10px; } }，优先级可能比 Bootstrap 高
务必打开 DevTools 的 Computed 面板，点开 padding-left，看哪一行真正生效——样式列表里带“overridden”的，就不是真正在干活的那个。
