Bootstrap 5 的 mt-3 等工具类在旧浮动结构中失效，因浮动元素脱离文档流且 flex 容器忽略其 margin；.row 默认含 24px 横向间距；自定义类易被带 !important 的工具类覆盖；推荐用隔离容器重置布局行为。
Bootstrap 5 的 CSS 工具类本身不会“让”旧页面间距异常，而是它默认启用的 flex 布局模型、gutter 注入逻辑和高权重样式，与旧项目中依赖 float/inline-block/手写 margin/padding 的写法发生底层冲突——这不是覆盖失效，是布局语义打架。
为什么 mt-3 在旧结构里完全没反应
常见现象：给一个浮动元素（float: left）加 mt-3，DevTools 里 margin-top 看似生效，但视觉上顶部空白没出现。根本原因是：
- 浮动元素脱离文档流，父容器高度塌陷，
mt-3的 top margin 实际作用在“虚空”中 - 如果父容器是 Bootstrap 5 的
.row（display: flex），而子项却带float，flex 容器会忽略该子项的 margin 计算 -
mt-3在 flex 容器中语义变成“沿主轴起始方向偏移”，但若容器flex-direction: row，它就根本不起作用
优先检查：.row 的 computed display 是否为 flex，同时子元素是否含 float —— 出现这个组合，mt-/mb- 类基本无效。
gx-3 没写却有 24px 间隙，是因为没关掉默认 gutter
Bootstrap 5 移除了 “不写 = 无间距” 的隐式逻辑。所有 .row 默认继承 :root 中的 --bs-gutter-x: 1.5rem（即 24px），哪怕你一个 gx- 类都没加。
立即学习“前端免费学习笔记（深入）”；
- v4 中没写
.no-gutters→ 列紧贴；v5 中没写gx-*→ 默认 24px 间隙 - 响应式断点没补全时更明显：只写
gx-md-2，则 xs/sm 下仍走 1.5rem，默认“突然变宽” - 别用
mx-0或px-0硬清——这会让.row的负 margin 和.col的 padding 失配，导致整行右偏或内容截断
正确做法：<div class="row gx-0 gx-md-2 gx-lg-3">，显式归零小屏再逐级加。
<h3>自定义类如 <code>.my-p-2 压不过 px-md-3
Bootstrap 5.3+ 给多数工具类加了 !important，而你写的 .my-p-2 { padding: 0.5rem; } 没加权重，直接被覆盖。
- DevTools「Computed」面板里如果 padding 值被划掉，大概率是被工具类干掉了
- 想覆盖，要么提升选择器特异性（比如
.card-body .my-p-2），要么只对具体属性加!important（如padding-left: 0.5rem !important;） - 纯 CSS 写响应式类名（如
my-p-md-2）必须手动写媒体查询，且断点值要严格对齐 Bootstrap 的$grid-breakpoints（如@media (min-width: 768px)）
最省事的替代方案：改用 ps-2/pe-2（逻辑方向），或直接修改 --bs-spacer 变量——但它只影响系统工具类，不影响你的自定义类。
真正容易被忽略的是：这些异常几乎从不单独出现。一旦看到 mt-* 失效 + 列间距变大 + .row 高度塌陷，基本可以断定是旧浮动结构撞上了 Bootstrap 5 的 flex 栅格——这时候修一个类不如重置一层隔离容器，比如用 .legacy-grid 显式关闭 flex 行为和 gutter 注入。
