最安全的做法是使用 px-{breakpoint}-0 响应式类；bootstrap 5 中 .container 在 sm 及以上断点默认左右内边距 15px，属设计行为，需按需清除而非全局归零，且务必确认“白边”来源是否真为 .container。
直接用 px-{breakpoint}-0 响应式类最安全
Bootstrap 5 的 .container 在 sm（≥576px）及以上断点默认带 padding-left: 15px 和 padding-right: 15px，这是设计行为，不是 bug。它配合 .row 的负外边距实现栅格对齐。要取消，别全局清零，而是按需选断点：
-
px-lg-0：仅在lg（≥992px）及以上清除左右内边距，小屏保留呼吸空间 -
px-xl-0：仅在xl（≥1200px）及以上生效，lg下仍保持 15px - 别用
p-0——它会把上下 padding 也干掉，可能让标题塌陷或导航错位 - 确保类加在
.container元素上：<div class="container px-lg-0">...</div>
手机端本来就没左右内边距，别白加 px-0
很多人在手机上看到“白边”，第一反应是给 .container 加 px-0，结果没变化——因为 xs 断点（≤576px）下，Bootstrap 默认的 padding-left 和 padding-right 就是 0。所谓“白边”大概率来自：
- 父元素（比如 CMS 模板里的 wrapper 或
上的全局样式） - 误用了
.container-fluid，但被一个带 padding 的外层<div> 包裹 <li>项目中自定义了媒体查询，比如 <code>@media (max-width: 576px) { .container { padding: 0 20px; } }—— 这才是真源头 - ❌ 错误：
@media (min-width: 768px) { .container { padding-left: 0; } }→ 右边还有 15px - ✅ 正确：
@media (min-width: 768px) { .container { padding-left: 0; padding-right: 0; } } - 这条 CSS 必须加载在 Bootstrap CSS 之后，否则会被覆盖
- 别漏掉其他变体：如果你用了
.container-xl，它的 padding 规则可能独立存在，得一并覆盖 - 加在
.container上后，xs断点下的默认无 padding 行为会被覆盖，反而导致小屏内容贴边过紧 - 后续维护时，你很难判断某处留白是来自 Bootstrap、自定义 CSS，还是
!important的副作用 - 真正需要全宽的内容（比如 banner、Canvas、第三方嵌入），更稳的解法是换容器：删掉
.container，用语义化 wrapper（如<section class="hero"></section>），自己控制宽度和 padding
用 DevTools 直接看 Computed 面板里的 padding-left 和 padding-right 值，确认是不是真来自 .container 自身。
手动写 @media 覆盖时，左右必须都清
如果工具类不够用（比如想从 md 断点开始清零），就得写 CSS。但常见错误是只写一边：
别用 !important 强制归零，尤其在小屏
!important 看似一劳永逸，但它会破坏 Bootstrap 原生的响应式逻辑：
最容易被忽略的是：大屏下的“15px 白边”是设计意图，不是缺陷；而手机端的“白边”几乎从不来自 .container 自身——它只是你没注意到的父级或全局样式在冒泡。
