bootstrap 5 官方栅格系统底层仍是 flexbox，.row 默认 display: flex；所谓“grid 模式”仅存于第三方扩展或实验性插件中，未进入核心。
Bootstrap 3 的栅格系统完全基于 float，而 Bootstrap 5 并不使用 CSS Grid 实现其默认栅格——它仍以 flexbox 为核心，只是在特定场景下支持你用原生 grid 替代。所谓“Bootstrap 5 用 CSS Grid”，是常见误解。
Bootstrap 3 的 .row 为什么总要加 .clearfix？
因为 .row 内部的 .col-* 全靠 float: left 水平排列，父容器会塌陷。不加 .clearfix 或伪元素清除，后续内容就会顶上来、错位、高度计算失准。
常见错误现象：
- 卡片列表底部文字上浮到最后一行列里
-
.row高度为 0，背景色/边框不可见 - 嵌套
.row时子列换行异常
实操建议：
- 永远在
.row后手动加.clearfix（Bootstrap 3 自带） - 避免在
.col-*上设height或margin-bottom，否则清除逻辑更难预测 - 等高列需 JS 补齐或额外 wrapper +
display: table-cell
Bootstrap 5 的 .row 默认是 flex，但不是 grid
Bootstrap 5 的 .row 是 display: flex，不是 display: grid。它的列宽、换行、对齐全部由 Flexbox 规则控制，和 CSS Grid 无关。Grid 只是你可选的「替代方案」，需手写类名启用。
容易踩的坑：
- 误以为
.col-6在 Bootstrap 5 中能自动响应grid-template-columns—— 它不能 - 在
.row上同时写display: grid和用.col-*类，导致类名失效或样式冲突 - 期望
.g-3（间距类）对 grid 布局生效 —— 它只作用于 flex-based.row
如果你真要用 CSS Grid，得绕开 .row/.col-*：
- 删掉所有
.row和.col-* - 直接给容器加
display: grid和grid-template-columns - 用
grid-area或justify-self控制子项，而非.text-center或.offset-md-2
从 float 切到 flex 后，哪些行为变了？
核心变化不是“更现代”，而是布局控制粒度不同：float 是单向流式定位，flex 是主轴+交叉轴双向控制。
典型差异：
-
vertical-align在 float 下无效，在 flex 下用align-items（.align-items-center）即可居中 -
.col-md-4在 Bootstrap 3 中可能因内容高度不一导致换行错乱；Bootstrap 5 中同一.row下所有.col-*自动等高 - 偏移方式从
.col-md-offset-3（Bootstrap 3）变成.offset-md-3（Bootstrap 4/5），底层是margin-left: auto而非left定位 -
.row-no-gutters在 Bootstrap 3 中需手动覆盖负边距；Bootstrap 5 改用.g-0，统一控制 gutter，且支持.gy-2（仅垂直间距）
什么时候该放弃 .row/.col-*, 直接写 display: grid？
当你需要同时精确控制行和列的尺寸、顺序、重叠，而不是简单“一行几列”时。
适用场景：
- 仪表盘（Dashboard）：固定 header/nav/main/aside 区域，且需跨多列/行
- 卡片网格中，某些卡片需占 2×2 格，其余 1×1 —— flex 很难优雅实现
- 响应式切换不是“缩放列数”，而是彻底重构区域流向（比如手机竖排 → 桌面横排三栏 → 大屏分上下两区）
注意兼容性底线：
- CSS Grid 在 IE11 及更早版本完全不支持；若项目仍需兼容 IE，就别碰
grid - Bootstrap 5 本身已放弃 IE 支持，但你的业务代码可能还依赖旧 polyfill
- 不要混用：一个容器里既写
.row又设display: grid，浏览器会按后者覆盖前者
真正麻烦的从来不是选 flex 还是 grid，而是团队是否对两种模型的理解一致、组件库是否预留了 grid 接口、以及设计师给的稿子到底适配哪一套逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
