直接用px-0类最安全，它只清除.container左右内边距、保留上下padding，不破坏响应式逻辑；误用p-0会清四边导致导航栏塌陷、footer遮挡，硬写padding: 0 !important则锁死所有断点并破坏垂直节奏。
直接用 px-0 类最安全
别写自定义 CSS，也别碰 !important。Bootstrap 5 自带的 px-0 就是专为这事设计的：它只清左右 padding，保留上下留白，不破坏响应式断点逻辑。加在 .container 元素上就行：<div class="container px-0">。
常见错误是用 p-0——它会把顶部和底部 padding 一起干掉，结果导航栏和内容贴在一起，footer 文字被遮住，小屏下视觉跳变明显。
-
px-0在所有断点生效，包括 xs（手机）到 xxl - 需要仅在大屏清除？换
px-lg-0或px-xl-0 - Bootstrap 5.3+ 支持更语义化的
ps-0 pe-0（start/end），效果一样
为什么不能直接写 padding: 0 !important
Bootstrap 的 .container 在不同断点下 padding 值其实是一致的（sm 起都是 15px），但硬加 padding: 0 !important 会锁死所有尺寸，导致两个问题：
- 小屏下内容紧贴屏幕边缘，失去呼吸空间
- DevTools 里能看到
padding-top和padding-bottom也被强制归零，常让.navbar下方塌陷、.footer上方文字被覆盖
这不是“多写了”，而是切断了 Bootstrap 内部对垂直节奏的控制逻辑。
立即学习“前端免费学习笔记（深入）”；
.container-fluid 真的没留白吗？
默认确实没有左右 padding，但如果你发现它还有“白边”，大概率不是它的问题：
- 父元素（比如
<body>或 CMS 自动生成的 wrapper）自带padding或margin - 某些主题或定制版 Bootstrap 悄悄给
.container-fluid加了px-3类 - 浏览器默认
bodymargin 没清，得单独处理：body { margin: 0; }
别给 .container-fluid 加 px-0——它本来就不需要，加了反而暴露了其他地方的样式污染。
清完 padding 还有缝隙？检查 .row 的 gutter
px-0 只解决容器本身，但 .row 默认有负外边距（margin-left: -15px），配合 .col 的内边距形成栅格间隙。如果目标是真贴边（比如全宽 banner），还得同步处理：
- 加
g-0或gx-0到.row，关掉列间距 - 子列用
p-0清除自身 padding，避免内部留白 - 注意嵌套
.row时，父.col的 padding 会影响子行对齐，必要时也加p-0
真正容易被忽略的是：移除容器 padding 是第一步，不是终点；后续的栅格行为是否连贯，取决于你有没有同步理清 .row 和 .col 的间距链。
