本文详解 bootstrap 5.3 中 modal 不弹出、页面元素被意外推移的常见原因，重点指出 `data-toggle`/`data-dismiss` 属性已更新为 `data-bs-toggle`/`data-bs-dismiss`，并提供完整可运行代码与关键注意事项。
在使用 Bootstrap 构建用户注册流程时，模态框（Modal）是提升交互体验的关键组件。但许多开发者首次集成时会遇到两个典型问题：点击按钮无响应（Modal 不显示），以及 Modal 即使隐藏也会占据文档流空间，导致页面其他元素发生位移。这些问题通常并非逻辑错误，而是源于 Bootstrap 版本升级带来的 API 变更——尤其是从 Bootstrap 4 迁移至 Bootstrap 5.3+ 时，数据属性（data attributes）已全面重命名。
✅ 核心修复：更新 data 属性前缀
Bootstrap 5 起，所有 JavaScript 触发类 data 属性均统一增加 bs- 命名空间前缀，以避免与其他库冲突。原 data-toggle 和 data-dismiss 已废弃，必须替换为：
| 旧写法（Bootstrap 4） | 新写法（Bootstrap 5.3+） |
|---|---|
| data-toggle="modal" | data-bs-toggle="modal" |
| data-dismiss="modal" | data-bs-dismiss="modal" |
因此，您的“Sign Up!”按钮需修改为：
同时，Modal 内部的关闭按钮也需同步更新。推荐使用语义化更强的
⚠️ 注意： 是 Bootstrap 5 的标准关闭按钮组件，它自带 × 图标和间距样式；若仍使用 ×，请确保包裹在 btn-close 容器内或手动添加 font-size/line-height 等样式，否则可能显示异常。
? 完整可运行示例（精简版）
以下为修复后的最小可运行结构（含必需的 CDN 引入）：
Fellos 登录页 用户登录
已有账号？立即登录
? 其他关键注意事项
- JS 文件必须加载：Modal 是纯 JavaScript 组件，仅引入 CSS 不足以启用交互。务必在
