本文详解 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!”按钮需修改为：
