p-0 不是用于修改栅格列间距的正确手段；它清空 .col 的 padding 但未调整 .row 的负 margin，破坏 gutter 协同机制，导致布局左偏、贴边甚至横向滚动条。
p-0 是 Bootstrap 的内边距工具类，作用是将元素的四边 padding 全部设为 0。但它**不是用来“修改栅格列间距（gutter）”的正确手段**——用错地方会导致布局错位、内容贴边、甚至横向滚动条出现。
为什么 p-0 加在 .col 上会破坏 gutter 平衡
Bootstrap 5+ 的 gutter（列间距）靠的是 .row 的负外边距 + .col 的正内边距协同实现。比如默认 gx-3 对应 --bs-gutter-x: 1rem，.row 有 margin-inline-start: -0.75rem，每个 .col 有 padding-inline-start: 0.75rem。
-
p-0只清空.col的 padding，但没动.row的负 margin —— 结果就是整行被“往左拽”了，右侧列内容视觉上缩进，实际布局已越界 - 若同时用
.container-fluid，越界更明显，容易触发横向滚动条 - 响应式断点下（如
col-md-6），p-0还可能让小屏列宽计算失准，导致换行异常
p-0 的合理使用场景
它适合用于「控制列内部内容与列边界之间的留白」，而非调节列与列之间的距离。典型用途包括：
- 让图片、卡片或表格撑满整个
.col宽度，不留默认px-3那种呼吸感 - 嵌套子
.row时，给外层.col加p-0，避免子行的g-*和外层 padding 叠加出双倍空白 - 配合
border类画紧贴内容的边框（否则边框会包住 padding 区域，看起来“离内容很远”）
示例：<div class="col-md-4 p-0"><img src="..." class="w-100"></div>
想改列间距？别碰 p-0，用 g-* 或变量
真正控制列之间距离，必须作用于 .row 元素：
- 局部调整：直接加
g-0（彻底清空）、g-2（8px）、g-lg-4（仅大屏生效） - 全局统一：在 Sass 中覆盖
$grid-gutter-width变量，再编译 CSS - 响应式精细控制：组合使用
gx-md-2 gx-lg-4，中屏起小间距，大屏加大
错误写法：<div class="row">
<div class="col p-0">A</div>
<div class="col p-0">B</div>
</div> → 列贴边但布局失衡
正确写法：<div class="row g-0">
<div class="col">A</div>
<div class="col">B</div>
</div>
最易被忽略的一点：gutter 是 .row 和 .col 协同行为，任何只动一边的操作（比如只加 p-0、只改 .row margin、只写 px-2）都会打破这个契约。调试时看开发者工具里 --bs-gutter-x 是否生效，比盯着 padding 值更可靠。
