关闭按钮不适用于引导程序中的 Toast答案

【问题标题】：Close button not working for Toast in bootstrap关闭按钮不适用于引导程序中的 Toast
【发布时间】：2022-09-28 21:21:27
【问题描述】：

我是 Bootstrap v5 的初学者，我发现关按钮不起作用敬酒在我的代码中，即使我只是从网站上复制了代码。这是我的代码

<div class=\"toast show\" >
<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\"></button>
</div>
<div class=\"toast-body\">
  Hello, world! This is a toast message.
</div>

标签： bootstrap-5

【解决方案1】：

您是否包含了引导程序所需的 js 和 css 文件？你可以找到更多关于必要依赖的信息： https://getbootstrap.com/docs/5.0/getting-started/introduction/ 这是使用 CDN 的示例：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

<div class="toast show">
  <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"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。