Bootstrap警告框关闭按钮点击无效怎么办？

玉萱提问于 2026-02-05 20:02:36 阅读 28

组件

我用Bootstrap的alert组件加了关闭按钮，但点击叉号没反应。代码照文档写的，样式倒是正常显示：


<div class="alert alert-warning alert-dismissible" role="alert">
  这是一个警告！
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

已经确认引入了bootstrap.css和bootstrap.js，连popper.js也加了。但控制台没报错，就是按钮点击没动画也没消失。是不是哪里遗漏了配置？

Alerts警告 UI框架栅格系统

我来解答赞 6 收藏

反馈

2 条解答

开发者玉飞 Lv1

你这个情况应该是 Bootstrap 的 JavaScript 没有正确初始化。最简单的办法是确认一下你有没有在页面底部引入 bootstrap.js 的同时，也正确加载了依赖的 popper.js，并且顺序要对。下面是修改后的代码，直接复制过去试试看：

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>

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

另外检查一下你的 alert 组件有没有写错 class 或者属性，比如 data-bs-dismiss="alert" 这个属性有没有拼写错误。

2026-02-08 12:31

瑞珺 Dev Lv1

你这个情况我遇到过，Bootstrap的alert关闭按钮无效，一般是因为引入了错误版本的JS文件或者引入顺序不对。

代码给你，直接复制去用：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">



<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"</script>

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

注意顺序不能颠倒。popper.js必须在bootstrap.js之前引入。如果你用的是本地文件，确保路径是对的。

另外，检查一下你页面有没有重复引入jQuery或其他JS库，有时候会冲突。特别是jQuery和Bootstrap的版本不兼容时，就会出现这种问题。

你原来的代码没错，但Bootstrap 5开始，alert组件依赖Popper，必须引入popper.js才能正常工作。很多教程或文档没说清楚这点。

你可以试试上面的CDN引入方式，能快速验证问题是不是出在资源文件上。如果还不行，再去检查浏览器控制台看网络请求有没有404。

2026-02-05 20:03