bootstrap 5官方栅格底层仍是flexbox，.row默认display: flex而非grid；强行设为grid会破坏负边距、列宽计算与响应式逻辑，导致塌缩和错位。
Bootstrap 5 官方不提供“浮动网格”，.row 从 v4 起就已是 display: flex，不是 float；所谓“替代浮动”实际是用 CSS Grid 替代旧式 float 布局（比如 CMS 输出的老旧 HTML），或绕开 Bootstrap 自身的 Flex 栅格去获得二维控制力。
为什么不能直接给 .row 加 display: grid
强行在 .row 上覆盖 display: grid 会破坏其负外边距机制（margin: 0 -0.75rem）和子项宽度计算逻辑：.col-6 的 flex: 0 0 50% 在 Grid 容器里完全失效，列宽塌缩、间隙错乱、响应式断点中断。DevTools 里能看到 .col-* 的 width/flex 声明被忽略，但又没报错——只是静默失效。
-
.row是为 Flex 设计的容器，它的 gutter 补偿、子项对齐、换行行为都依赖flex-wrap和justify-content -
.col-*类名本身不带grid-column或grid-area，Grid 下无意义 - 混用会导致浏览器渲染时反复重排，尤其在表单或动态内容中易出现视觉跳动
启用 Bootstrap 5.2+ 的 g-col-* 网格类要改 Sass 变量
Bootstrap 5.2 引入了实验性 CSS Grid 支持，但默认关闭。想用 .grid + .g-col-*，必须在自定义 SCSS 中显式开启 $enable-cssgrid: true，且顺序严格：
- 先
@import "bootstrap/scss/functions" - 再
@import "bootstrap/scss/variables" - 紧接着写
$enable-cssgrid: true;（不能晚于 variables） - 最后
@import "bootstrap/scss/bootstrap"
CDN 引入的 bootstrap.min.css 里没有这些类——它们根本没被编译进去。路径要按你项目中 node_modules 实际位置调整，比如 @import "../node_modules/bootstrap/scss/functions";。
更推荐：直接用原生 display: grid，不碰 Bootstrap 栅格类
如果你需要跨行/跨列、命名区域、行列同时对齐（比如仪表盘、卡片墙、复杂表单），原生 Grid 比任何封装都干净。HTML 不用套 .row/.col，CSS 也不依赖 Bootstrap 的 12 列语义。
- 等宽五列：
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; } - 主-侧布局：
grid-template-columns: 1fr 300px;（比col-9 col-3更精确） - 响应式只需媒体查询内改
grid-template-columns，不用重复写一堆col-md-* - 所有清除浮动 hack（如
::after { clear: both }）必须删掉——Grid 容器天然 BFC，不会塌陷
注意：旧代码里如果用 float 实现图文绕排（文字环绕图片），Grid 无法自动继承该行为；得改用 shape-outside 或分段放入 grid-area，这不是简单替换能解决的。
旧浮动 HTML 结构怎么兼容 Bootstrap 5
如果 CMS 或遗留系统输出的是 <div class="float-start">…</div>
<div class="float-end">…</div> 这类结构，别硬套 Bootstrap 栅格。应该用 CSS 隔离：
- 用
.legacy-float { display: block; } .legacy-float::after { content: ""; display: table; clear: both; }恢复清除逻辑 - 重置 Bootstrap 对该区块的影响：
.legacy-float [class*="col-"], .legacy-float .row { display: block !important; margin: 0; } - 禁用 Bootstrap 的 gutter 注入：
.legacy-float { --bs-gutter-x: 0; --bs-gutter-y: 0; }，避免和旧padding/margin叠加
真正麻烦的不是样式，而是 JavaScript：如果旧逻辑依赖 offsetHeight 计算浮动后高度，或监听 resize 重排浮动元素，这些在 Grid 或 Flex 下大概率失效，必须重写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
