bootstrap 5升级后样式错乱主因是旧属性类名被静默忽略：data-toggle须全改为data-bs-toggle，.col-md-6需补全为.col-12.col-md-6，ml/me方向语义不同，jquery调用须重写为原生api。
Bootstrap 升级到 5.x 后样式错乱，大概率不是“没生效”，而是旧类名、旧属性、旧结构被新版本静默忽略——不报错，但模态框打不开、列不堆叠、按钮没颜色、图片被拉伸，全是这类问题。
data-bs-toggle 和 data-bs-dismiss 必须替换，否则 JS 组件全挂
Bootstrap 5 彻底废弃 data-toggle 和 data-dismiss，所有交互组件依赖带命名空间的属性。漏改一个，对应功能就静默失效：
-
data-toggle="modal"→ 必须改为data-bs-toggle="modal" -
data-target="#myModal"→ 必须改为data-bs-target="#myModal" -
data-dismiss="modal"→ 必须改为data-bs-dismiss="modal" - jQuery 调用如
$().modal("show")已不可用，必须重写为new bootstrap.Modal(el).show() - 第三方插件（如旧版
bootstrap-datepicker）若未声明支持 v5，也会因读不到data-toggle而失效
响应式栅格类名含义变了，.col-6 不再是“中屏起生效”
Bootstrap 3 的 .col-md-6 表示“仅在中屏及以上占 6 列”，而 Bootstrap 5 的 .col-6 表示“所有断点（包括 xs）都占 6 列”。漏写断点前缀，小屏下就会宽度过大、内容撑开：
- 旧写法：
.col-md-6 .col-lg-4→ 升级后 xs 下不生效，列宽为auto，布局错乱 - 正确写法：
.col-12 .col-md-6 .col-lg-4（补全所有需要的断点） -
.col（无数字）仍表示等分，但底层是flex: 1 1 0；若内容超长且无word-break，可能横向溢出 - 检查
.row是否被覆盖为display: block，这会让 flex 栅格彻底失效
margin/padding 工具类方向语义升级，ml/mr 不等于 ms/me
Bootstrap 5 引入逻辑方向类：ms-3（margin-start）、me-3（margin-end），不再对应物理 left/right。这不是简单字符串替换，行为差异直接影响 RTL 支持和 Flex 布局：
-
ml-3→ms-3在 LTR 下视觉一致，但在dir="rtl"下会自动翻转到右侧；盲目全局替换可能导致 RTL 模式错位 -
ml-auto和ms-auto在 Flex 容器中行为不等价：ms-auto依赖兄弟元素存在才能“挤出”空间，mx-auto才更接近传统居中语义 - 已废弃类如
float-left必须改为float-start，否则在 v5 中完全无效
图标、打印、卡片图片等高频场景需额外补丁
这些不是“升级失败”，而是 v5 主动移除或重构的功能，必须手动补上才可用：
- 图标类
bi-search本身不带 SVG 数据，必须显式引入bootstrap-icons.css，否则图标空白 - 打印样式默认极弱，
.btn背景、.table边框全失效，需手动加@media print规则，并设-webkit-print-color-adjust: exact -
.card-img-top变形主因是只设width: 100%，必须配合父级aspect-ratio+ 子级object-fit: cover+height: 100% - Modal/Tooltip 默认插入
document.body，若你用了命名空间（如.my-bs），必须显式传container: ".my-bs"或加data-bs-container=".my-bs"
最易被忽略的是那些没写在文档显眼位置的默认值变更：比如 box-sizing 回退、gap 默认值调整、或 CSS Custom Properties（如 --bs-primary）变成全局声明——它们不会报错，但会让局部样式“看起来像坏了”，排查时得对照新旧版 SCSS theme 文件逐行比对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
