Bootstrap 5 容器（Container）默认不设置左右内边距，其水平居中效果通过 margin: auto 实现；页面两侧的留白通常源于父元素或自定义样式。如需添加内边距，推荐使用内置工具类（如 ps-3、pe-4）或通过 SCSS 变量 $container-padding-x 进行全局配置。
Bootstrap 5 Container 默认有左右内边距吗？
许多开发者在学习 Bootstrap 5 时，常会疑惑：.container 的左右内边距（padding）默认值是多少？答案可能出乎意料——Bootstrap 5 的 .container 类本身并未直接定义 padding-left 或 padding-right。
那么容器是如何实现居中并产生两侧空白区域的呢？关键在于 margin-left: auto 与 margin-right: auto 的自动外边距机制。内容区域的最大宽度由 max-width 控制，而你在页面上看到的左右空白，通常来自于父级容器（例如默认的 body 元素）或开发者自行添加的样式规则。
因此，当你感觉容器“似乎应该有”左右内边距时，通常是以下两种情形之一：
- 你主动为
.container添加了padding样式（例如希望内容与边框保持一定距离，提升视觉舒适度）。 - 你在使用全宽度的
.container-fluid容器，但希望模拟出带有边距的“半流体”布局视觉效果。
如何通过自定义 CSS 覆盖默认样式
最直接、见效最快的方法，是创建一个自定义 CSS 类，以更高的优先级覆盖 Bootstrap 的默认样式。这里有一个重要细节：通常需要添加 !important 声明来确保样式生效（除非你使用 SCSS 并在 Bootstrap 源码之后进行编译）。
.container-padded {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
在 HTML 中按如下方式使用即可： ...
不过，这种方法有几个常见的“陷阱”需要注意：
- 避免意外重置垂直边距：如果仅使用
padding: 0 1.5rem简写，会将垂直方向的 padding 也设为 0，可能破坏原有的版面布局节奏。 - 注意选择器优先级：
!important必须应用于正确的选择器。例如 Bootstrap 使用的是.container，若你写成div.container可能优先级不足。 - 兼顾响应式断点：如果你在某个媒体查询（例如针对移动端）中修改了 padding，请务必检查在其他断点（如
md,lg）下的显示效果是否保持一致。
使用 Bootstrap 5 间距工具类快速调整（推荐方法）
如果只是临时性微调，或希望快速进行原型验证，更推荐使用 Bootstrap 内置的间距工具类。它们更加轻量，且天然支持响应式设计。
ps-3→ 对应padding-left: 1rem（其中s代表 start，可自动适配 RTL 从右到左布局）。pe-4→ 对应padding-right: 1.5rem（e代表 end）。- 支持组合使用：
这种方法优势明显：无需编写任何额外 CSS 代码，仅通过类名即可控制边距。工具类还支持响应式前缀（例如 ps-md-5），可在不同屏幕尺寸下灵活调整。最关键的是，它不会干扰 .container 原有的 max-width 布局逻辑。
值得注意的一点：工具类同样适用于 .container-fluid。但对于标准的 .container，在超小屏幕（xs）下，由于其宽度为 100%，添加的 padding 可能会影响视觉上的居中效果，此时可搭配 mx-auto 工具类来确保居中。
通过 SCSS 变量全局修改（适合项目级定制）
当你基于 Bootstrap 源码进行构建时（例如使用 Webpack + Sass），最高效、最彻底的方案是直接修改 SCSS 变量。这适用于需要在整个项目中统一调整容器边距的场景。
核心变量是 $container-padding-x：
// 注意：自定义变量必须在引入 bootstrap 之前定义 $container-padding-x: 1.25rem; @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; // ... 继续引入其他必要的模块
修改此变量后，所有 .container 实例的左右内边距将同步更新，包括在各个响应式断点下计算出的值（例如在 md 断点下，计算公式可能为 calc(1.25rem - var(--bs-gutter-x, 0))）。
采用此方法时，有几个细节容易忽略：
- 此变量仅作用于
.container，对.container-fluid无效，后者默认不设置左右 padding。 - 若你还需要调整上下内边距，需单独设置
$container-padding-y，因为$container-padding-x仅控制水平方向。 - 修改全局变量后，建议检查 DOM 结构，确保某些第三方组件（例如内联图标容器）不会意外继承此 padding，导致布局错位。
总而言之，Bootstrap 容器（Container）的边距设定是其整个响应式设计体系的重要组成部分。生硬地用 CSS 覆盖，极易与内置的栅格系统逻辑产生冲突。因此，在大多数情况下，优先使用工具类进行局部调整，或通过 SCSS 变量进行全局定制，远比手动编写大量 !important 规则更可持续，也更易于维护。
