本文详解 bootstrap 5+ 版本中 modal 无法触发显示、且隐藏时仍占用布局空间的常见原因，重点指出 data-toggle/data-dismiss 属性已更新为 data-bs-toggle/data-bs-dismiss，并提供完整可运行的修复方案。
Bootstrap 自 5.0 版本起全面重构了 JavaScript 插件的 DOM API，废弃了旧版（v4 及更早）中使用的 data-toggle 和 data-dismiss 属性，统一替换为带命名空间的 data-bs-toggle 和 data-bs-dismiss。若项目升级至 Bootstrap 5.3（或任何 5.x 版本）但未同步更新 HTML 属性，Modal 将完全失效：点击按钮无响应，且因 .modal.fade 类默认保留 display: block（配合 opacity: 0 和 visibility: hidden 实现“隐藏”），导致其仍参与文档流，从而推挤、错位周围元素。
✅ 正确写法（Bootstrap 5.3+）
需同时修改触发按钮与模态框内所有关闭操作按钮：
⚠️ 注意：Bootstrap 5+ 推荐使用 替代自定义 × 结构，语义更清晰、样式更一致；如需保留 × 符号，仍可使用原结构，但必须确保 data-bs-dismiss="modal" 存在。
? 必备资源引入（CDN 示例）
确保页面正确加载 Bootstrap 5 的 CSS 与 bundle 版 JS（含 Popper 和 Modal 所需依赖）：
? 额外排查建议
- 检查控制台报错：若出现 Uncaught TypeError: bootstrap.Modal is not a constructor，说明 JS 未正确加载或版本冲突。
- 避免重复初始化：不要手动调用 new bootstrap.Modal(...) 同时又使用 data-bs-toggle，二者选其一。
- 模态框位置无关紧要：.modal 元素可置于 任意位置（推荐放在 前），无需嵌套在触发按钮附近。
- 隐藏时不再占位：Bootstrap 5 默认通过 display: none（而非仅 opacity: 0）彻底移出渲染流，因此修复后页面元素将恢复正常布局。
✅ 最终效果
修复后，点击 “Sign Up!” 按钮将平滑淡入 Modal；点击 × 或 “Close” 按钮后 Modal 完全隐藏且不干扰其他内容排版——真正实现「按需显示、隐形无感」的用户体验。
遵循以上规范，即可快速解决 Bootstrap 5+ 中 Modal 不响应、错位等典型问题，为登录/注册等关键交互提供稳定支撑。
