Bootstrap 5 栅格基于 flexbox 全新实现，移除了 float 逻辑，.col-md-6 不再自动堆叠因依赖父容器 flex-wrap；offset/push/pull 类被 margin/order 替代；需注意 row 间距、flex 属性覆盖及绝对定位兼容性问题。
直接替换 CSS 文件或 JS 脚本会导致布局错乱、组件失效、响应式崩溃——Bootstrap 5 的栅格系统不是 Bootstrap 3 的升级版，而是基于 flexbox 的全新实现，float 布局逻辑在 BS5 中已无对应语义。
为什么 col-md-6 在 Bootstrap 5 里不自动堆叠了
Bootstrap 3 的 .col-md-6 依赖 float: left + width + 清除浮动实现并排；而 Bootstrap 5 中，.col-md-6 是一个 flex item，默认受父级 .row { display: flex } 管控。这意味着：
- 不再需要
.clearfix，也不再有“浮动塌陷”问题 - 列高自动等高（flex 默认
align-items: stretch），无需 JS 或 hack 拉齐 - 小屏下是否堆叠，取决于
.row是否设flex-wrap: wrap（BS5 默认开启）和容器宽度，而非 float 的“换行触发机制” - 如果你发现两列在移动端没堆叠，大概率是忘了给
.row加flex-wrap类，或误删了响应式断点类（如漏掉col-12）
col-md-offset-2 失效后该用什么
Bootstrap 5 彻底移除了所有 offset-* 类，因为 flex 布局中“偏移”应由 margin 控制，而非模拟浮动位移。替代方案分两种场景：
- 想让一列右推（类似 BS3 的
col-md-offset-2）：用ms-auto，但必须确保它前面有其他列占位，例如：<div class="row"> <div class="col-md-4">左侧</div> <div class="col-md-4 ms-auto">右侧（左空2列宽度）</div> </div>
- 想居中固定宽度内容（如 BS3 的
col-md-offset-3 col-md-6）：直接用mx-auto+ 显式宽度：<div class="row"> <div class="col-md-6 mx-auto">居中内容</div> </div>
-
ms-auto只在 flex 容器中生效，且不预留空间——它靠“挤走左侧兄弟”来实现视觉右移；mx-auto则不依赖兄弟元素，更接近传统 offset 的语义
push/pull 类为何完全不能用了
Bootstrap 3 的 col-md-push-4 和 col-md-pull-4 是通过 left/right 配合 float 实现的视觉挪位，本质是破坏文档流的 hack。Bootstrap 5 中：
立即学习“前端免费学习笔记（深入）”；
- 没有对应类，强行加
left: 33.33%会和 flex 的order、justify-content冲突，导致布局不可预测 - 真正等效的是
order-*类（如order-md-2），它改变 flex 子项渲染顺序，不影响 DOM 结构，也兼容无障碍 - 若需“大屏左文右图、小屏上图下文”，不要用 push/pull 模拟，改用
flex-column+flex-md-row组合：<div class="d-flex flex-column flex-md-row"> <div class="me-md-3">文字</div> <div>图片</div> </div>
- 注意：
order值只在同级 flex 容器内有效，跨.row不起作用
迁移时最易忽略的 CSS 兼容细节
很多布局“看起来正常”，上线后却在 Safari 或旧 Chrome 上错位，根源常藏在这些细节里：
-
.row默认有margin-left: -15px; margin-right: -15px，而 flex 的gap类（如g-3）会额外叠加间距——若同时用.row和g-3，实际列间距可能翻倍 - Bootstrap 5 的
col类默认设flex: 0 0 auto，而 BS3 的col是纯width；若你曾手动覆盖width，现在得同步重写flex属性，否则响应式会失效 -
float-left和float-right工具类在 BS5 中仍存在，但仅用于图文环绕等遗留场景；若误用于布局容器，会脱离 flex 上下文，导致子项对齐异常 - 自定义 CSS 中若写了
display: table-cell或position: absolute配合 BS3 栅格，迁移到 BS5 后必须重审——flex 容器内absolute定位的参考系是最近的定位祖先，不再是.row
