不能只写 padding: 0，因为会清除上下内边距导致内容塌陷，且未加 !important 易被 Bootstrap 样式覆盖；应精准设置 padding-left/padding-right 为 0 并保留上下间距。
直接在 CSS 中覆盖 .container 的 padding-left 和 padding-right 即可，但必须注意 Bootstrap 4 的断点逻辑和选择器权重——盲目写 .container { padding: 0 !important; } 会破坏响应式行为，且在小屏下可能意外清掉本该保留的留白。
为什么不能只写 padding: 0？
Bootstrap 4 的 .container 在所有断点（xs 到 xl）下默认都设了 padding-left: 15px 和 padding-right: 15px，但它不依赖媒体查询生成不同值，而是统一声明。所以你只需覆盖这两个方向即可，但要注意：
-
padding: 0会同时清除上下内边距，可能导致内容紧贴.navbar或.footer，视觉上“塌陷” - 未加
!important时，你的规则可能被 Bootstrap 自带样式覆盖（尤其当 CSS 文件加载顺序靠后） - 若项目中还用了
.container-fluid，它默认也是15px水平 padding，需一并处理
推荐写法：精准控制左右，保留上下
用更安全、语义明确的写法，只动水平方向：
.no-hpad .container,
.no-hpad .container-fluid {
padding-left: 0 !important;
padding-right: 0 !important;
}
然后在 HTML 中这样用：
立即学习“前端免费学习笔记（深入）”；
<div class="no-hpad"> <div class="container">...</div> </div>
好处是：
- 不影响
padding-top/padding-bottom，上下呼吸空间仍在 - 用类名包裹，避免全局污染，后续可按需开关
- 比直接改
.container更易维护，不会干扰其他页面的默认行为
如果要适配特定断点（比如只在 ≥768px 清除）
Bootstrap 4 没有内置 px-sm-0 这类工具类（那是 Bootstrap 5+ 的），所以得自己补媒体查询：
@media (min-width: 768px) {
.container,
.container-fluid {
padding-left: 0;
padding-right: 0;
}
}
注意三点：
- 别漏写
.container-fluid，否则中屏以上用 fluid 容器仍会有白边 - 这个规则必须放在 Bootstrap CSS 之后加载，否则会被覆盖
- 别用
(min-width: 768px)同时配max-width: 991px—— Bootstrap 4 的 md 断点起始就是768px，不需要手动限定上限
最常被忽略的坑：父元素或 CMS 模板自带 padding
即使你清掉了 .container 的 padding，手机端仍可能看到“白边”，因为：
-
或外层<div class="wrapper"> 被 CMS 主题加了 <code>padding: 0 20px - 某个自定义组件 wrapper 套了两层
.container，内层清了，外层没清 - DevTools 的 Computed 面板里显示
padding-inline-start: 15px，但来源不是 Bootstrap，而是某处行内样式或第三方插件
务必先用开发者工具点开该元素，看 Computed 面板里 padding-left 和 padding-right 的“来源”链接，再决定改哪一层——而不是一上来就写 CSS 覆盖。
