Toast关闭按钮点击无效，因默认仅为视觉元素，需通过data-bs-dismiss="toast"绑定或手动监听点击并调用toast.hide()；自动延时消失与手动关闭可共存，依赖data-bs-delay和data-bs-autohide配合。
Toast 关闭按钮为什么点不生效？
bootstrap 的 toast 默认关闭按钮（×）只是个视觉元素，**不会自动绑定关闭逻辑**。必须手动调用 hide() 方法或监听点击事件触发销毁。常见错误是只写了 html 结构但漏掉 js 初始化或事件绑定。
正确做法是：确保 toast 元素有 data-bs-autohide="false"（禁用自动隐藏以配合手动控制），再为关闭按钮添加点击监听：
document.querySelectorAll('.toast .btn-close').forEach(button => {
button.addEventListener('click', function() {
const toastEl = this.closest('.toast');
const toast = bootstrap.Toast.getInstance(toastEl);
toast.hide();
});
});
如何让 Toast 自动延时消失又支持手动关闭？
Bootstrap 5.3+ 原生支持 data-bs-delay 控制自动隐藏时间（单位毫秒），但前提是启用了自动隐藏（即不设 data-bs-autohide="false"）。关键在于：**自动隐藏和手动关闭可以共存**，只要初始化后不销毁实例，后续调用 hide() 依然有效。
-
data-bs-delay="3000"：3 秒后自动调用hide() -
data-bs-autohide="true"：默认值，可省略 - 手动点击关闭按钮时，
hide()会立即触发并清除内部定时器
示例 HTML（无需额外 JS 即可工作）：
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000">
<div class="toast-header">
<strong class="me-auto">提示</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">操作成功！</div>
</div>
为什么调用 bootstrap.Toast.getOrCreateInstance() 更安全？
直接调用 new bootstrap.Toast() 可能重复初始化，导致多个定时器叠加、关闭失效或控制混乱。尤其在动态插入 toast（如 Vue/React 组件中）时，容易因重复实例引发内存泄漏或行为异常。
推荐始终使用工厂方法获取实例：
const toastEl = document.getElementById('myToast');
const toast = bootstrap.Toast.getOrCreateInstance(toastEl); // 安全复用
toast.show();
这样即使多次执行，也只创建一个实例；且 getOrCreateInstance() 能正确识别已存在的数据属性（如 data-bs-delay），避免手动传参遗漏。
移动端点击关闭按钮无响应？检查这三点
Toast 在 iOS 或部分 Android WebView 中点击无反应，大概率不是代码问题，而是以下配置缺失：
- 父容器未设置
position: relative或z-index，导致点击穿透到下层元素 - 关闭按钮
.btn-close缺少pointer-events: auto（某些 CSS 重置库会全局设为none） - toast 元素被
transform: translateZ(0)或will-change触发硬件加速后，在旧版 WebKit 中丢失事件冒泡
临时验证方式：给 .btn-close 加一行内联样式 style="pointer-events: auto !important;"，若恢复响应，说明是 CSS 层级覆盖问题。
