应使用 px-lg-0 类，因 bootstrap 5 中 lg 断点起始宽度为 992px，适用于大屏清除左右内边距，而小屏（xs、sm、md）保留默认 padding 以维持呼吸空间和布局完整性。
直接用 px-{breakpoint}-0 工具类，别写 p-0 或手动覆盖 CSS —— 后者会破坏小屏体验或漏掉右 padding。
为什么不能直接写 p-0
p-0 会同时清除上下左右所有 padding，而 .container 的上下 padding 是布局必需的（比如容纳导航栏、标题等），清掉会导致内容塌陷、错位。更关键的是：它不区分断点，手机端也会失去那 15px “呼吸空间”，文字紧贴屏幕边缘，体验变差。
常见错误现象：<div class="container p-0">...</div> 在小屏下首尾列内容贴边、标题行高异常、卡片上边距消失。
-
p-0→ 全局清空，无响应式控制 -
ps-0 pe-0→ 只清左右，但仍是全断点生效，小屏也无留白 - 正确做法是按需选择断点，如只在大屏清左右边距
该用哪个 px-{breakpoint}-0 类
Bootstrap 5 的断点定义是：xs（sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）。选哪个取决于你希望从多宽开始取消侧边距：
- 想从平板起（≥768px）就全宽 → 用
px-md-0 - 只想在桌面大屏（≥992px）才去掉 → 用
px-lg-0 - 仅超大屏（≥1200px）才需要 → 用
px-xl-0
示例：<div class="container px-lg-0">...</div>，这样 xs/sm/md 下仍保留默认 15px 左右 padding，lg+ 才清零。
手动写 @media 覆盖容易踩什么坑
自己写媒体查询看似灵活，但极易遗漏细节：
- 只写了
padding-left: 0，忘了padding-right: 0，结果右边仍有白边 - 用了
@media (min-width: 992px)，但没加!important，被 Bootstrap 原生样式层叠覆盖 - 项目里用了自定义主题或扩展断点，
.container在某些变体（如.container-xl）中可能被额外设了 padding，你的媒体查询没覆盖到
更稳妥的做法是复用 Bootstrap 自带的工具类，它们已预编译好所有断点和优先级，无需担心覆盖失败。
如果连 .row 的负外边距也要一并处理
.container 的 15px padding 和 .row 的 -15px margin 是配对设计的。当你用 px-lg-0 清除容器侧边距后，.row 的负 margin 在 lg+ 断点下其实已“多余”——虽然不影响渲染，但若后续要嵌套其他非 Bootstrap 组件，可能引发意外偏移。
此时可配合 mx-lg-0 清除 .row 的左右 margin：
<div class="container px-lg-0">
<div class="row mx-lg-0">
<div class="col-lg-6">左列</div>
<div class="col-lg-6">右列</div>
</div>
</div>
注意：mx-lg-0 不影响小屏下的 .row 行为，小屏仍保持栅格对齐逻辑。
真正麻烦的不是“怎么去掉”，而是“去掉之后是否还和其他组件兼容”——比如第三方图表库、富文本编辑器容器、或嵌入的 iframe，它们可能依赖默认的 container 留白。上线前务必在真实设备断点下交叉验证。
