手机端 .container 默认无左右 padding，所谓“白边”通常源于父元素或全局样式；应先用开发者工具确认真实来源，而非盲目添加 px-0 或 !important。
手机端 .container 本就没有左右 padding，别白忙活
Bootstrap 5 的 .container 在 xs 断点（max-width: 576px）下默认 padding-left 和 padding-right 就是 0，不是漏掉、不是 bug、也不是你 CSS 写错了——它本来就不设边距。如果你在手机上看到“白边”，大概率来自其他地方。
- 检查父元素是否带
padding或margin（CMS 模板、自定义 wrapper、上的全局样式） - 用浏览器开发者工具选中该容器，直接看 Computed 面板里的
padding-left和padding-right值，确认是不是真来自.container - 留意是否误用了
.container-fluid却被外层 div 包裹，而那个外层 div 才是 padding 源头
为什么加了 px-0 在手机上还是没用
px-0 是全局生效的，但它只清除当前元素的左右内边距；如果手机端本就为 0，加了自然没变化。更关键的是：它不解决“你以为有 padding，其实没有”的误判问题。
- 不要一上来就加
px-0或p-0，先定位真实来源 -
px-0对xs断点无效，因为那里原本就没 padding；它真正起作用是在sm及以上断点 - 若你发现
xs下确实有非零 padding，说明已有自定义 CSS 覆盖了 Bootstrap 默认行为，得查覆盖源，而不是补丁式加类
真正需要干预的场景：你手动加了响应式 padding
有些项目会用媒体查询给 .container 在小屏也加 padding，比如：@media (max-width: 576px) { .container { padding: 0 20px; } }。这种才是要处理的“手机端 padding”。
- 搜索项目中所有对
.container的 CSS 覆盖，特别是带@media的规则 - 优先删掉这类定制，或改用更精确的选择器（如只针对某特定容器：
.hero-container） - 若必须保留，用
padding-inline: 0替代padding-left/padding-right，语义更现代，且支持逻辑属性响应式
最稳的解法：结构先行，别跟 .container 较劲
想让某一块内容（比如全宽 banner、Canvas 动画、第三方嵌入组件）在手机和桌面都贴边，根本解法不是清 padding，而是换容器。
- 删掉
.container，用语义化 wrapper（如<section class="hero"></section>），自己控制宽度和 padding - 需要栅格？把
<div class="row"> 直接放进去——<code>.row的负 margin 本来就是为抵消.container的 padding 设计的，没它反而更干净 - 别用
!important强制归零，它会让xs断点下的响应式逻辑失效，后续维护时你会反复踩坑
真正容易被忽略的是：手机端的“白边”几乎从不来自
.container 自身，而是来自你没注意到的父级或全局样式。定位比覆盖重要。
