bootstrap 5 toast必须手动初始化并调用show()才能显示，仅html结构、show类或data-bs-autohide属性无效；右下角定位需position-fixed+bottom-0+end-0组合，多toast堆叠须用flex-column容器并逐个初始化。
Bootstrap 5 的 Toast 不会“自动触发”——它必须显式调用 show() 才能出现，所谓“自动”只是配置了 data-bs-autohide="true" 后的自动关闭，不是自动显示。
Toast 必须手动初始化才能显示
光写 HTML 结构、加 show 类、甚至设置 data-bs-autohide 都没用。Bootstrap 5 把控制权完全交给 JS 实例，CSS 类只是状态标记，不是行为开关。
- 必须加载
bootstrap.bundle.min.js（含 Popper 和 Bootstrap JS） - 每个
.toast元素都要单独 new 一个bootstrap.Toast实例 - 必须显式调用
toast.show()，不能依赖 DOM 渲染后自动激活 - 如果用
innerHTML动态插入 toast，得在插入后立即初始化，否则会漏掉
右下角定位要同时满足三个条件
想让 toast 稳定停在右下角，不能只靠一个类或内联样式；否则容易被裁剪、遮挡或在 RTL 场景错位。
- 父容器必须有
position-fixed+bottom-0+end-0（不是right: 0） - 推荐结构：
<div class="position-fixed bottom-0 end-0 me-3 mb-3"></div> - 检查父级是否有
overflow: hidden，比如.container或.card，会导致 toast 被裁剪 -
z-index建议设为1090（和 modal 同级），避免被其他组件盖住
多条 Toast 堆叠必须手动管理 DOM 顺序
Bootstrap 5 默认不堆叠——多个 toast 直接写死在 HTML 里，会重叠覆盖，不是 bug，是设计如此。
- 必须用
.toast-container包裹所有 toast，并设为flex-column布局 - 新增 toast 要用
appendChild()追加到底部，不能用insertAdjacentHTML()或innerHTML += - 每次追加后，必须对新元素单独 new
bootstrap.Toast并调用show() - 别混用 BootstrapVue 的
toast，它的stackable: true是 Vue 内部队列机制，和原生 DOM toast 互不感知
自动关闭的延迟逻辑容易误配
data-bs-delay 只在初始化时读取一次，之后改 toast._config.delay 不生效，也不建议这么做。
- 默认延迟是
5000毫秒，设data-bs-autohide="false"或不写该属性，data-bs-delay就无效 - 想动态控制关闭时间，更可靠的方式是销毁旧实例、重建新实例
- 关闭动画依赖
fade类，若删了它，show()仍有效，但消失时无过渡效果 - 调试时 toast “闪一下就消失”，大概率是
autohide和delay没配对，或 JS 初始化失败导致 fallback 到 CSS 显示逻辑
真正难的不是写出来，而是让多条 toast 在不同设备、不同父容器、不同插入时机下都保持位置稳定、不被裁剪、不互相遮挡——这些细节几乎全靠 DOM 插入顺序、容器定位类、z-index 和 flex 布局的协同，少一个环节就出问题。
