bootstrap 5 中 data-bs-toggle 未替换会导致所有交互组件静默失效；必须将旧版 data-toggle、data-target、data-dismiss 全部更新为带 bs- 前缀的对应属性，否则模态框、下拉菜单、折叠导航等均无法触发且控制台无报错。
data-bs-toggle 未替换导致交互组件全失效
Bootstrap 5 彻底移除了 data-toggle 和 data-target，所有触发逻辑现在依赖带命名空间的 data-bs-toggle 和 data-bs-target。旧代码里只要还留着 data-toggle="modal"，JavaScript 就完全不识别——模态框打不开、下拉菜单点不动、折叠导航栏静默失败。
- 必须逐个检查
<button></button>、<a></a>等触发器元素，把data-toggle→data-bs-toggle，data-target→data-bs-target - 若项目中用了
$().modal("show")这类 jQuery 调用，全部得重写为new bootstrap.Modal(...).show() - 第三方插件（如旧版
bootstrap-datepicker）若未声明支持 v5，也会因读不到data-toggle而挂掉，需确认其最新版兼容性
ms/me 替代 ml/mr 不是简单字符串替换
ms-3 和 me-3 是 Bootstrap 5 引入的逻辑方向类（margin-start / margin-end），不是物理方向（left/right）的别名。在 LTR 环境下视觉一致，但语义和行为已不同——尤其当项目启用 RTL（dir="rtl"）时，ms-3 会自动翻转到右侧。
- 盲目全局替换
ml-3→ms-3可能导致 RTL 模式下布局错位 -
ml-auto和ms-auto在 Flex 容器中行为不等价：ms-auto依赖兄弟元素存在才能“挤出”空间；mx-auto才更接近传统居中语义 - 若项目没用 RTL，可安全替换，但建议同步检查是否混用了
float-left等已废弃类，它们在 v5 中已被float-start替代
.col-6 在 v5 中含义彻底反转
Bootstrap 3 的 .col-md-6 表示“仅在中屏及以上占 6 列”，而 Bootstrap 5 的 .col-6 表示“所有断点（包括 xs）都占 6 列”。漏掉断点前缀，会导致小屏下宽度异常（内容撑开而非满宽堆叠）。
- 原来写法
.col-md-6 .col-lg-4，v5 中必须补全为.col-12 .col-md-6 .col-lg-4，否则 xs 下.col-md-6不生效，列宽为 auto -
.col（无数字）在 v5 中仍是“等分”，但底层是flex: 1 1 0，若内容超长且无word-break，可能横向溢出 - 如果发现小屏列没堆叠，优先检查
.row是否被意外覆盖为display: block，或是否漏加响应式类
图标类名 bi-* 必须配对 CSS 文件才生效
bi-search 这类类名本身不带图标数据，只是 CSS 选择器。Bootstrap 5 已彻底移除 Glyphicons，所有图标依赖外部引入的 bootstrap-icons.css 提供 SVG 数据 URI 和样式规则。
- 只改 class 名但没引入
bootstrap-icons.css，图标必然空白；检查 Elements 面板中<i class="bi-search"></i>是否渲染出内容 - CDN 引入路径必须带
/font/子路径，例如https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css，漏掉会 404 - 颜色控制直接用
color，fill会被覆盖；别用background-color，SVG 图标不响应这个属性
真正容易被忽略的是那些没报错、也没警告的变更：比如 .container-fluid 默认加了左右 padding，.form-control 字号从 16px 升到 17px，.g-3 间距值取决于你是否同步更新了 Sass 的 $spacers map——这些变化不会中断构建，但会让像素级对齐的旧布局悄悄偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
