如果你使用的是Bootstrap 5.0，在bootstrap.js代码中，data-dismiss选择器似乎已经更改为data-bs-dismiss，所以我只需要将data-dismiss="modal"更改为data-bs-dismiss="modal"就可以了。

<div class="alert alert-warning alert-dismissible" role="alert">
  <span type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></span>
  <strong>Warning!</strong> Still on beta stage.
</div>

<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="outline: none;">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    $('.alert').alert()
  })
</script>

要解决您的问题，请使用上面的代码

<script>
  document.addEventListener('DOMContentLoaded', () => {
    $('.alert').alert()
  })
</script>

当您单击X以消除警报时，它会运行一个名为alert（）的js函数，要使用此函数，您需要将下面给出的script-src添加到代码中

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

我现在使用Bootstrap v5.1，根据文档，模板为

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

参考：https://getbootstrap.com/docs/5.1/components/alerts/#dismissing

对于Bootstrap v.5.1，只需在alert-dismissible之后添加fade show，并在类之后添加btn-close和data-bs-dismiss

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Still on beta stage.
</div>

我也一直在与之斗争。这不是最有效的方法，但这是我最终解决我正在工作的项目的方法。在我看来，当条件触发警报时，我使用了以下代码。

messages.error(request,'Insert your error message here')

然后在我想显示错误的页面模板中。其中“add_data”是显示错误的页面

<div class="alert alert-info">
    <a class="close" href="{% url 'add_data' %}" data-dismiss="alert"></a>
           {{ message }}
</div>

我的例子使用了href="#”，当你点击X时，它会转到页面的顶部。我只是改变了它，导航回清除警报消息的同一页面。希望这对大家有所帮助。

确保您成功地将CND添加到BootStrap Javascript中。您可能只在查看“入门”部分时包含了指向CSS链接的链接。
把这句话加到你的标题或结束语之前。

尝试使用此功能

$('.close').click(function(){
     $(".test").css("display", "none");

或

$('.test').hide();

}）;
并在span标记中声明类

<strong class="test">Warning!</strong> Still on beta stage.

应该在工作