bootstrap 5 默认启用 d-flex 的 flex-wrap: wrap，导致工具栏等布局断裂；需显式加 flex-nowrap 还原 v4 行为；data- 属性必须改为 data-bs-；方向类改用 -start/-end；栅格间距拆分为 gx-/gy-；.col-6 含义变为全断点生效。
Bootstrap 5的d-flex默认启用flex-wrap: wrap
这是最常引发布局断裂的静默变化：Bootstrap 4 中 d-flex 默认是 flex-nowrap，子元素强行挤在一行；Bootstrap 5 反过来，默认启用换行。工具栏、按钮组、导航条突然“断成两行”，八成是这个在作怪。
要还原 v4 行为，必须显式加 flex-nowrap；若需保留换行但控制时机，得用 flex-wrap 或响应式类如 flex-wrap-md-nowrap（注意：v5 不支持 flex-wrap-md-* 这类响应式前缀，只能全局设置）。
-
d-inline-flex行为没变，仍是内联 + 不换行 - 别依赖
flex-grow-1的响应式变体——flex-grow-md-1在 v5 中完全无效，浏览器直接忽略（无报错） - 如果父容器有
overflow: hidden、子项含position: absolute或图片没设max-width: 100%，.row的等高拉伸（align-items: stretch）会失效
data- 属性必须全部改用 data-bs- 前缀
这不是兼容层，是硬性要求。所有 JS 组件（modal、collapse、alert、tooltip）只识别 data-bs-*。旧写法如 data-toggle="modal" 或 data-dismiss="alert" 会静默失效——点击没反应、弹窗打不开、提示关不掉，控制台也毫无提示。
必须逐个替换：
-
data-toggle→data-bs-toggle -
data-target→data-bs-target -
data-dismiss→data-bs-dismiss -
data-slide→data-bs-slide
即使你项目里还留着 jQuery，Bootstrap 5 的 JS 也不会读取旧属性。
方向类从 -left/-right 改为 -start/-end
不再用物理方向，改用逻辑起点/终点，为 RTL（如阿拉伯语、希伯来语）原生支持铺路。在 LTR 页面里 ms-3 看起来和 ml-3 一样，但语义不同、不可互换。
常见替换：
-
float-left→float-start -
text-right→text-end -
ml-auto→ms-auto -
mr-2→me-2
如果项目已启用 dir="rtl"，继续用 ml/mr 会导致错位；新类会自动翻转，但旧类不会。
间距与栅格类拆分为 gx-* 和 gy-*
v4 的 .g-3 是统一控制行列间隙，v5 拆成水平 gx-3 和垂直 gy-4，更精细。同时 .row-no-gutters 已废弃，必须用 .g-0 或组合 .gx-0 .gy-0。
注意嵌套场景：
- 外层
.gy-4+ 内层.gy-2是叠加关系，不是覆盖 -
.container-fluid在 v5 默认带padding-left/right: var(--bs-gutter-x)，左右多出空白？加px-0即可还原 v4 视觉 -
.col-6含义彻底翻转：v4 中它只在超小屏生效（等价于.col-xs-6），v5 中表示“所有断点下均占一半宽度”——漏写.col-md-6之类，最小屏下可能变成内容撑宽而非预期的 12 列满宽
迁移时不能只靠搜索替换类名，得逐层验证 DOM 结构是否仍符合预期，尤其注意那些靠“默认不换行”或“默认左对齐”隐式工作的老代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
