Django项目中Bootstrap模态框点击触发无响应问题求助

• 你项目中引入的是Bootstrap 4.3.1版本，但复制的是Bootstrap 5.1版本的模态框示例代码，两个大版本的模态框触发属性规则不兼容：
  • Bootstrap 5使用带bs后缀的属性：data-bs-toggle、data-bs-target、data-bs-dismiss
  • Bootstrap 4使用无后缀的属性：data-toggle、data-target、data-dismiss
• 额外存在的隐患：base.html中重复引入了jQuery，先加载了slim版又加载了完整版，可能引发JS冲突，建议只保留一个jQuery版本。

修改main.html里的模态框相关属性，适配Bootstrap 4的规则，修改后代码如下：

{% extends "main/base.html" %}
{% block content %}
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
<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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

同时建议删除base.html中多余的jQuery引入，比如删掉jquery-3.3.1.slim.min.js那一行，避免JS冲突。

内容的提问来源于stack exchange，提问作者オパラ