Bootstrap v5中Toast组件关闭按钮无法正常工作求助

Bootstrap 5的Toast组件关闭按钮失效，核心原因是缺少必要的JavaScript支持——你只复制了HTML结构，但Bootstrap的交互组件（包括Toast的关闭功能）需要依赖官方提供的JS文件才能正常工作。

解决步骤： #

1. 引入Bootstrap 5 JavaScript文件
   在HTML的</body>标签前引入包含Popper的Bootstrap JS包（无需额外引入Popper）：

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

2. 规范Toast组件结构（可选补充）
   你的HTML结构基本正确，建议补充无障碍属性让组件更规范：

   <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
       <strong class="me-auto">Bootstrap</strong>
       <small>11 mins ago</small>
       <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body">
       Hello, world! This is a toast message.
     </div>
   </div>
   

3. 手动初始化Toast（自动初始化失效时用）
   若引入JS后仍无法关闭，可添加手动初始化代码，确保组件被正确激活：

   const toastElList = document.querySelectorAll('.toast')
   const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl))
   

完整可运行示例： #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Toast Demo</title>
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>

  <!-- 引入Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <!-- 手动初始化 -->
  <script>
    const toastElList = document.querySelectorAll('.toast')
    const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl))
  </script>
</body>
</html>

关键点说明：

• JS文件必须在Toast HTML结构之后引入，确保DOM加载完成后能正确识别组件。
• data-bs-dismiss="toast"属性本身是正确的，但需要Bootstrap JS监听该属性对应的事件才能执行关闭动作。

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