应使用.container-fluid配合响应式内边距类（如px-sm-3 px-xl-0），而非修改.container的margin；因.container的居中依赖auto margin且受max-width限制，无法真正铺满大屏，而.container-fluid无宽度限制，再通过断点控制padding可实现大屏铺满、小屏留白。
大屏铺满、小屏留白：别碰 .container 的 margin
直接给 .container 加 mx-0 或 me-0 不起作用，因为它的居中逻辑依赖 margin-left: auto; margin-right: auto，硬覆盖会破坏居中，且无法解决“大屏不铺满”的本质问题——.container 的 max-width 限制才是根因。
正确做法：用 container-fluid + 响应式 padding 控制小屏留白
想让内容在大屏（如 xl/xxl）真正铺满视口，同时小屏（xs/sm）保留左右留白，必须放弃 .container，改用 .container-fluid，再通过内边距工具类控制小屏视觉留白：
-
.container-fluid无max-width限制，天然撑满父容器宽度 - 加
px-sm-3 px-md-4这类响应式padding类，在小屏生效，大屏自动回退到默认（或你指定的更大断点值） - 务必显式加
px-0或px-xl-0清除大屏 padding，否则大屏仍有 15px 内边距 - 示例：
<div class="container-fluid px-sm-3 px-xl-0">...</div>
为什么不能用 wrapper 套 .container 来“模拟”铺满
有人尝试这样写：<div class="mx-sm-3 mx-xl-0"><div class="container">...</div></div>，看似可行，但实际会出问题：
-
.container自身仍被max-width截断（比如 xl 下最多 1140px），外层mx-xl-0只是把容器“挪到左边缘”，右侧空白依然存在 - 小屏下
mx-sm-3确实加了外边距，但.container宽度也变窄（sm 断点下 max-width 仅 540px），导致内容区实际可用宽度更小 - 视觉上“小屏有留白、大屏铺满”的目标没达成，反而增加了不可控的嵌套层级
容易被忽略的细节：px-* 类的断点生效逻辑
px-sm-3 在 xs（px-md-4 在 sm（576–767px）下也不生效——这意味着如果你只写了 px-sm-3，那么 xs 屏（比如 iPhone SE）会完全无左右 padding，内容贴边。要覆盖全小屏，得补上 px-2（作用于 xs）或明确写 px-2 px-sm-3：
-
px-2：所有断点都生效（包括 xs） -
px-sm-3：仅 ≥576px 生效（sm 及以上） - 组合使用时，高断点类会覆盖低断点类，但 xs 没对应类就按默认走
- 真正安全的写法：
px-2 px-sm-3 px-xl-0，确保 xs/sm/md 有留白，xl+ 彻底清零
