Bootstrap 5 实用类底层逻辑重排，data- 属性强制升级为 data-bs-，左右类改为 -start/-end 支持 RTL，间距类拆分为 gx-/gy-，d-flex 默认启用 flex-wrap 导致横排失效需加 flex-nowrap 修复。
Bootstrap 5 的实用类不是“微调”，而是底层逻辑重排——很多类名看似只改了个词，但行为、作用域、甚至生效前提都变了。直接替换类名大概率导致布局错乱或样式静默失效。
data-* 属性全部升级为 data-bs-*
所有交互类的触发属性必须加 bs- 前缀，否则 JS 组件完全不响应。
-
data-toggle="modal"→ 必须改成data-bs-toggle="modal"；漏写bs-，点击按钮后 modal 无反应，控制台也不报错 -
data-dismiss="alert"→ 改为data-bs-dismiss="alert"；旧写法下关闭按钮点击无效，alert 永远不消失 -
data-target="#myTab"→ 改为data-bs-target="#myTab"；Tab 切换失效，active 状态卡死
这个改动不是可选的兼容层，是强制命名空间隔离。即使你保留 jQuery，Bootstrap 5 的 JS 也只认 data-bs-*。
左右类从 -left/-right 统一为 -start/-end
不再用物理方向命名，改用逻辑起点/终点，为 RTL（右到左）页面原生支持铺路。
-
.float-left→.float-start；.float-right→.float-end -
.text-left→.text-start；.text-right→.text-end -
.ms-auto（margin-start auto）替代.ml-auto；.me-auto替代.mr-auto
如果你的项目要支持阿拉伯语或希伯来语页面，这步不能跳过；若只做 LTR 页面，start 就等于 left，但类名不兼容，旧 CSS 不会生效。
间距与栅格工具类语义拆分：.g-* → .gx-*/.gy-*
原来一个 .g-3 同时控制水平和垂直间距，现在必须明确指定方向，否则默认值可能意外覆盖预期。
-
.g-3仍可用（兼容），但推荐用.gx-3（仅水平）或.gy-3（仅垂直） -
.row-no-gutters彻底废弃，必须用.g-0或.gx-0 .gy-0 - 嵌套
.row时，外层.gy-4和内层.gy-2是叠加关系，不是覆盖——子行垂直间距 = 4rem + 2rem
尤其注意：.container-fluid 在 v5 中默认带 padding-left/right: var(--bs-gutter-x)，若没重置 --bs-gutter-x 或加 px-0，页面左右会多出空白。
Flex 工具类默认行为反转：d-flex 启用 flex-wrap
v4 的 d-flex 默认 flex-nowrap，v5 反过来——d-flex 默认 flex-wrap: wrap，这是最常被忽略的“静默破坏”点。
- 工具栏、导航条、按钮组横排失效？大概率是
d-flex自动换行了，加flex-nowrap即可修复 -
d-inline-flex行为未变，仍是内联 + 不换行，适合小范围组合 -
flex-grow-1等尺寸类**不支持响应式前缀**，flex-grow-md-1会被浏览器完全忽略（无报错） -
flex-fill在 v5 中语义更明确：等价于flex: 1 1 auto，比 v4 的隐式行为更可控
真正卡住迁移的，往往不是“找不到新类名”，而是没意识到 d-flex 这个最常用工具类的行为已彻底反转——它不再是你记忆中的那个“横排利器”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
