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 控制，而非模拟浮动位移。替代方案分两种场景：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 想让一列右推（类似 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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！