Bootstrap 5 Toast 默认不堆叠，需用 flex-column 的 toast-container 手动实现垂直堆叠；必须通过 appendChild 插入并显式调用 show()，禁用 innerHTML 拼接，避免与 BootstrapVue 的 toast 混用。
Bootstrap 5 Toast 默认不堆叠，必须手动启用容器和 stacking 逻辑
默认情况下，多个 .toast 元素直接写在 html 里，会重叠覆盖（尤其右上角），根本不会自动上下排列。这不是 bug，是设计如此——bootstrap 5 的 toast 本身无内置堆叠调度器，堆叠行为完全依赖 .toast-container 的定位 + css 布局 + js 控制顺序。
- 必须用
.toast-container包裹所有 Toast，且需添加定位类（如top-0 end-0）否则位置失控 -
.toast-container内部不能靠 margin/padding 模拟堆叠，得靠 flex 或 grid 控制子元素流式排列 - 原生 Bootstrap 5 不支持
stack: 1这类 jQuery 风格参数（那是 Bootstrap 4 + jQuery 插件的写法，已过时）
用 Flex 容器实现可靠垂直堆叠（推荐方案）
最稳的方式是把 .toast-container 设为 flex-column，并控制 gap 和对齐。这样新增 Toast 自动追加到底部，旧 Toast 不会被遮挡，也不依赖 JS 插入顺序。
- HTML 结构必须是：
<div class="toast-container position-fixed top-0 end-0 p-3 d-flex flex-column gap-2"></div> - 每个
.toast要带show类才可见；JS 初始化后，新 toast 插入到容器末尾即可自然堆叠 - 避免给单个
.toast设position: absolute，否则脱离文档流，flex 失效 - 移动端要注意：
top-0 end-0在小屏可能被状态栏/刘海遮挡，可改用bottom-0 end-0更稳妥
动态插入 Toast 时，别用 innerHTML 直接拼接
用 innerHTML += 插入新 Toast，会导致已有 Toast 的 show 状态丢失、事件监听器被清空、关闭按钮失效——因为整个容器 DOM 被重绘了。
- 正确做法：创建新
div元素，用container.appendChild(newToast)或container.append(newToast) - 插入后必须调用
bootstrap.Toast.getInstance(newToast)?.show()显式触发显示（不能只靠 class） - 如果用 Vue/React，别把 Toast 当作普通组件挂载；它们不是响应式 DOM，要走 portal 或手动管理实例
- 注意：同一容器内不要混用「自动 dismiss」和「永驻 toast」，否则计时器互相干扰
BootstrapVue 的 stackable 是另一套机制，别和原生 Toast 混用
如果你项目里同时引入了 BootstrapVue，它的 toast 组件确实有 stackable: true 和智能排序，但这是基于 Vue 生命周期和内部队列管理的，和原生 Bootstrap 5 的 .toast DOM 元素完全无关。
- 两者共存时，CSS 类名冲突（比如都用
toast）、定位容器重叠、z-index 打架很常见 - 调试时看到 toast “闪一下就消失” 或 “点关闭没反应”，大概率是两套系统在争 control 权
- 选一个：纯 Bootstrap 5 就彻底移除 BootstrapVue 的 toast 相关模块；要用 BootstrapVue 就别手写原生
.toast
appendChild 后没调 .show()，或者容器缺了 d-flex。
