Bootstrap 4关闭按钮在Django中无法正常工作求助

检查Bootstrap依赖是否正确引入 #

你的Alert结构符合Bootstrap规范，但关闭功能依赖对应的JavaScript文件，不同版本的Bootstrap依赖要求不同：

Bootstrap 4/3版本 #

必须按顺序引入jQuery和Bootstrap JS，建议放在</body>标签前：

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 再引入Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Bootstrap 5版本 #

Bootstrap 5不再依赖jQuery，但需要修改按钮的属性和类名：

1. 引入Bootstrap 5的JS文件：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2. 修改按钮代码，替换旧的属性和类：

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

注：Bootstrap 5会自动生成关闭图标，无需手动写×符号

排查JS冲突问题 #

如果依赖已正确引入但仍无效，检查页面是否有其他脚本（自定义代码或第三方库）与Bootstrap JS冲突。可以临时移除其他脚本，测试Alert是否能正常关闭，逐步定位冲突源。

验证消息标签的影响 #

确认{{ message.tags }}输出的类名不会破坏Alert的Bootstrap类结构。可以临时替换为固定类（比如alert-info）测试：

<div class="alert alert-info alert-dismissible fade show" role="alert">

内容的提问来源于stack exchange，提问作者toure kompa