bootstrap 5+ 的 .col 类默认含左右 0.75rem 内边距，直接设自定义 padding 会叠加或破坏栅格宽度；应优先使用 px-/py- 等内置间距工具类，或配合 gx-0 清除列间隙后再补足所需 padding。
Col类自带padding导致自定义padding冲突
Bootstrap 5+ 的 .col 类默认设置了 padding-left: 0.75rem 和 padding-right: 0.75rem（即12px），这是为栅格系统内边距对齐设计的。你直接写 style="padding: 20px;" 或加自定义 class 设 padding，会被这层内建 padding 覆盖或叠加，视觉上“没生效”或“撑大了列宽”。
- 根本原因不是 CSS 优先级低，而是 Bootstrap 把 padding 写在了
.col规则里，且未用!important—— 所以你的内联样式或后加载的 class 理论上能覆盖，但容易因 box-sizing 计算出错 - 实际表现常是：左右 padding 看似加进去了，但整列宽度超出了父容器的 12 分栏逻辑，破坏响应式布局
- 别用
!important硬盖，它会干扰其他组件（比如.card或.btn的内边距继承）
正确做法：用Bootstrap内置间距工具替代
Bootstrap 提供了一套原子类（如 px-3、py-2）来控制 padding/margin，它们和 .col 共存时不会破坏栅格计算逻辑 —— 因为这些类内部已适配 box-sizing: border-box，且作用于同一元素层级。
-
px-* / py-* / pt-* / pb-* / ps-* / pe-*是首选，比如class="col px-4"给列左右各加 1.5rem padding - 数值对应 $spacers（默认 0–5 → 0, 0.25rem, 0.5rem, 0.75rem, 1rem, 1.5rem），可查文档确认当前版本映射
- 避免混用：不要同时写
px-3和style="padding-left: 20px;"，后者会覆盖前者左值 - 若需非标准值（如 18px），建议单独写一个 utility class，而不是在 HTML 里硬塞 style
想彻底禁用Col默认padding？可以但要小心
有时确实需要清空默认 padding（比如嵌套卡片、全屏 banner），这时可以用 gx-0 + 自定义 padding，或者重置类。
- 最安全方式：
class="col gx-0 px-3"——gx-0移除列间水平间隙（即取消父容器.row的负 margin 和子列 padding），再用px-3补你需要的 padding - 不推荐直接写
class="col p-0"：它会把上下 padding 也清掉，而.col本身没设上下 padding，纯属多此一举，还可能影响垂直对齐 - 如果用了
row-cols-*或g-*类，注意它们会作用于整个 row，优先级高于单个 col 的 padding 类
调试时怎么看是不是padding惹的祸
Chrome DevTools 里 inspect 元素后，在 Styles 面板看 computed 值最准，别只盯 Elements 标签页写的 class。
- 检查
padding-left和padding-right的 computed 值是否包含 0.75rem（Bootstrap 默认）+ 你加的值 - 看
box-sizing是否为border-box—— Bootstrap 5+ 默认是，但如果项目里全局重写了，会导致 width 计算异常 - 临时删掉
.col类，只留div+ 你的 padding，对比布局变化，能快速定位是不是栅格系统本身的影响
实际改起来就几秒，但很多人卡在以为是“写法不对”，其实只是没意识到 Bootstrap 的 padding 是设计使然，不是 bug。真正麻烦的是改完 padding 后，和其他组件（比如 .form-control 在 col 里的对齐）产生连锁偏移 —— 这时候得回过头看 align-items 或 flex-fill。
