Bootstrap 5 点击分类Add按钮模态框不弹出，单独测试代码正常

你遇到的失效问题本质是当前项目用的是Bootstrap 5.0.0-beta1版本的代码，和你之前在JSFiddle测试时用的旧版Bootstrap（4.x及更早）的DOM交互规则完全不兼容。
你之前调整jQuery引入位置、给模态框单独设置容器都没解决，是因为这些操作都没碰到核心问题：

• Bootstrap 5 原生组件已经完全不依赖jQuery，不管你把jQuery放哪个位置，都不会影响组件逻辑
• 你写的所有交互触发属性都是旧版Bootstrap的写法，Bootstrap 5的JS解析器根本识别不到这些属性，自然不会触发弹出动作
• 模态框外层额外套的栅格容器，不是导致失效的核心原因，但会干扰组件的固定悬浮定位

具体的属性兼容问题清单：

• 触发按钮上的data-toggle="modal"、data-target="#exampleModal"是Bootstrap 4的写法，Bootstrap 5要求给所有交互属性加bs-前缀，改成data-bs-toggle、data-bs-target
• 模态框内部关闭按钮上的data-dismiss="modal"是旧版写法，Bootstrap 5要求改成data-bs-dismiss="modal"
• 关闭按钮的class="close"是旧版样式类，Bootstrap 5替换成了class="btn-close"，原来的类名不会加载对应样式

1. 替换「Categories」模块下Add按钮的触发属性 #

把原按钮的旧版属性全部替换为Bootstrap 5的标准写法：

<!-- 修正前的错误写法 -->
<a
  href="#"
  data-toggle="modal"
  data-target="#exampleModal"
  class="btn btn-primary"
>Add</a>

<!-- 修正后的正确写法 -->
<a
  href="#"
  data-bs-toggle="modal"
  data-bs-target="#exampleModal"
  class="btn btn-primary"
>Add</a>

2. 调整模态框的嵌套结构与内部属性 #

移除模态框外层多余的<div class="row">栅格包裹容器，把内部的旧版属性、类名全部替换：

<!-- 模态框直接放在container内部，不需要额外套栅格类 -->
<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-secondary"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary">
          Save changes
        </button>
      </div>
    </div>
  </div>
</div>

修正代码后如果还是不生效，可以通过控制台快速定位问题：

• 按F12打开浏览器开发者工具，切换到Console面板，手动执行模态框初始化命令：

  new bootstrap.Modal('#exampleModal').show()
  

• 如果执行后能正常弹出模态框，说明Bootstrap JS已经正常加载，问题就是触发按钮的属性没写对
• 如果控制台提示bootstrap is not defined，说明Bootstrap的JS文件加载失败，检查本地或者CDN的文件路径是否能正常访问

内容的提问来源于stack exchange，提问作者Brian U