Bootstrap 5 的 .container 类默认不设置左右内边距，其水平居中靠 margin: auto 实现，左右留白实际来自父容器或自定义样式；如需添加，推荐使用工具类（如 ps-3、pe-4）或 SCSS 变量 $container-padding-x 全局修改。
Container 默认左右内边距是多少
bootstrap 5 的 .container 类在不同断点下使用了预设的水平 padding，但**它本身并不直接设置 padding-left 或 padding-right**——而是通过 margin-left: auto 和 margin-right: auto 居中，内容区宽度由 max-width 控制，左右留白实际来自父容器（通常是 body）或自定义 padding。
真正影响“左右内边距”的，往往是以下两种情况之一：
- 你给
.container自己加了padding（比如想让内容离边框更远） - 你在用
.container-fluid但又想模拟带边距的“半流体”效果
直接覆盖 padding 的 CSS 写法
最直白有效的方式：用自定义类 + 更高优先级样式覆盖。注意必须加 !important（除非你用 SCSS 并在 Bootstrap 源码后编译）：
.container-padded {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}然后在 HTML 中：<div class="container container-padded">...
常见错误：
- 只写
padding: 0 1.5rem—— 会重置上下 padding，可能破坏原有垂直节奏 - 用
!important却没加在对应选择器上（比如只加在div.container但 Bootstrap 用的是.container） - 在媒体查询里改了 padding，但忘了同步处理其他断点（如
md、lg）
用 Bootstrap 5 工具类快速调整（推荐）
如果你只是临时微调，Bootstrap 自带的 spacing 工具类更轻量、可响应：
-
ps-3→padding-left: 1rem（s= start，适配 RTL） -
pe-4→padding-right: 1.5rem（e= end） - 组合使用：
<div class="container ps-3 pe-4">
优势是无需写额外 CSS，支持响应式前缀（如 ps-md-5），且不会干扰 .container 的 max-width 行为。
注意：工具类对 .container-fluid 同样生效，但对 .container 在小屏下（xs）可能被其 width: 100% 覆盖视觉效果，建议搭配 mx-auto 确保居中。
用 SCSS 变量全局修改（适合项目级定制）
如果你用 Bootstrap 源码构建（如 Webpack + Sass），可以直接重定义 $container-padding-x 变量：
// 自定义变量必须在 import bootstrap 之前 $container-padding-x: 1.25rem; <p>@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; // ... 其余 import
这个变量会影响所有 .container 实例，包括响应式断点下的计算值（如 md 下的 calc(1.25rem - var(--bs-gutter-x, 0))）。
容易忽略的点：
- 这个变量**不作用于
.container-fluid**，它默认无 padding - 如果同时用了
container-padding-y，需单独设置，$container-padding-x不影响上下 - 某些第三方组件（如 Bootstrap Icons 的 inline 容器）可能意外继承该 padding，要检查 DOM 结构
Bootstrap 的容器边距本质是设计系统的一部分，硬覆盖容易和响应式逻辑冲突；优先用工具类或 SCSS 变量，比手写 !important 更可持续。
