如何修复 Bootstrap 5+ 中 Modal 不弹出及页面元素错位问题-html教程

本文详解 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+）

需同时修改触发按钮与模态框内所有关闭操作按钮：

<!-- 触发按钮：使用 data-bs-toggle 和 data-bs-target -->
<button 
  id="sign_up" 
  type="button" 
  class="btn btn-primary" 
  data-bs-toggle="modal" 
  data-bs-target="#exampleModal">
  Sign Up!
</button>

<!-- 模态框内部关闭按钮（标题栏右上角） -->
<button 
  type="button" 
  class="btn-close" 
  data-bs-dismiss="modal" 
  aria-label="Close">
</button>

<!-- 底部“Close”按钮 -->
<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-dismiss="modal">
  Close
</button>

⚠️ 注意：Bootstrap 5+ 推荐使用 替代自定义 × 结构，语义更清晰、样式更一致；如需保留 × 符号，仍可使用原结构，但必须确保 data-bs-dismiss=”modal” 存在。

? 必备资源引入（CDN 示例）

确保页面正确加载 Bootstrap 5 的 CSS 与 bundle 版 JS（含 Popper 和 Modal 所需依赖）：