Bootstrap 5 Modal弹窗不显示且页面元素错位，如何解决？
- 内容介绍
- 文章标签
- 相关推荐
本文共计754个文字，预计阅读时间需要4分钟。
原文：
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 实现“隐藏”），导致其仍参与文档流，从而推挤、错位周围元素。
本文共计754个文字，预计阅读时间需要4分钟。
原文：
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 实现“隐藏”），导致其仍参与文档流，从而推挤、错位周围元素。