<p>直接用 px-0 会出问题，因它清除所有方向 padding，导致小屏下 .container 失去上下 padding 而塌陷；Bootstrap 4 无响应式 px-* 工具类，需手动写媒体查询并注意断点值、加载顺序及容器变体覆盖。</p>
直接用 px-0 会出问题
很多人一上来就给 .container 加 px-0，结果发现小屏下内容贴边、标题塌陷、导航错位。因为 px-0 同时清除了上下左右 padding，而 .container 在 xs 断点（≤576px）本就不带左右 padding，只靠上下 padding 维持呼吸感。贸然清零，padding-top 和 padding-bottom 也丢了，视觉节奏全乱。
Bootstrap 4 中必须手动写媒体查询
Bootstrap 4 没有 px-sm-0 这类响应式 padding 工具类（那是 Bootstrap 5+ 才有的）。想按断点清除左右内边距，只能自己写 CSS，且必须注意三点：
- 左右 padding 必须同时设为
0，只写padding-left: 0会导致右边仍留 15px 空白 - 媒体查询的
min-width值要对齐 Bootstrap 4 的断点：sm 是576px，md 是768px，lg 是992px - CSS 文件必须加载在 Bootstrap 4 的
bootstrap.min.css之后，否则会被覆盖
例如，想从 md 断点（≥768px）开始清左右 padding：
@media (min-width: 768px) {
.container {
padding-left: 0;
padding-right: 0;
}
}
别忘了 .container-fluid 和变体容器
如果你项目里混用了 .container-fluid 或自定义宽度容器（比如 .container-xl），它们的 padding 规则可能独立存在，不会被上面那段 CSS 覆盖。得显式补上：
立即学习“前端免费学习笔记（深入）”；
@media (min-width: 768px) {
.container,
.container-fluid,
.container-xl {
padding-left: 0;
padding-right: 0;
}
}
另外，Bootstrap 4 默认不支持 xxl 断点，.container-xxl 类不存在，写了也无效。
最常被忽略的“白边”来源
DevTools 里看到 .container 的 padding-left 是 15px，不代表它就是罪魁祸首。真实“白边”更可能来自：
-
<body>上的全局padding或margin - CMS 模板自带的 wrapper div，带了
padding: 0 20px - 你或同事之前加的自定义媒体查询，比如
@media (max-width: 576px) { .container { padding: 0 10px; } }
务必打开 DevTools 的 Computed 面板，逐层点开 padding 属性，看哪一行真正生效——不是所有“看起来像”的样式都来自 .container 自身。
