Bootstrap 5 Toast 必须用 JS 初始化才能显示，仅加 show 类无效；右下角定位需组合 position-fixed、bottom-0、end-0 等工具类；自动关闭需同时设置 data-bs-autohide 和 data-bs-delay；多 Toast 堆叠需手动管理位置与 z-index。
Toast 默认不显示？必须手动初始化
bootstrap 5 的 .toast 元素默认是隐藏的，哪怕加了 show 类，没走 js 初始化流程，它大概率不会动——这是新手最常卡住的地方。原因在于 bootstrap 5 把控制权交给了 js 实例，css 类只是“状态标记”，不是“触发开关”。
- 必须用
bootstrap.Toast构造函数创建实例，再调用show() - 直接写
<div class="toast show">不生效（除非同时加fade且 JS 已运行过） - 多个 Toast 要分别初始化，不能只对父容器调一次
toast()
示例：给右下角 Toast 绑定按钮
document.getElementById('show-toast-btn').onclick = () => {
const toastEl = document.getElementById('my-toast');
const toast = new bootstrap.Toast(toastEl);
toast.show();
};
右下角定位靠 CSS 类组合，不是单个类名
Bootstrap 5 没有叫 toast-bottom-right 这样的预设类，位置完全靠定位工具类拼装。想让它稳稳停在右下角，得同时满足三个条件：固定定位、底部对齐、右侧对齐。
- 必需组合：
position-fixed bottom-0 end-0 - 加
me-3 mb-3防止贴边溢出（尤其移动端） - 避免用
right: 0或bottom: 0写内联样式——会和 Bootstrap 的 RTL 支持冲突 - 如果父容器有
overflow: hidden，Toast 会被裁剪，务必检查
正确结构示例：
<div class="position-fixed bottom-0 end-0 me-3 mb-3" style="z-index: 1090">
<div class="toast fade" id="my-toast" role="alert">
<div class="toast-body">操作成功</div>
</div>
</div>
自动关闭失效？检查 data-bs-delay 和 data-bs-autohide
Toast 不自动消失，八成是这两个属性没配对。data-bs-autohide="true" 是开关，data-bs-delay="3000" 是倒计时，缺一不可，而且必须写在 .toast 根元素上，写在 .toast-body 里无效。
-
data-bs-delay单位是毫秒，别写成3（那是 3ms） - 设为
false或省略时，data-bs-autohide自动失效 - JS 初始化后，再用
toast._config.delay动态改延迟值，不如直接重建实例可靠
推荐写法：
<div class="toast fade" data-bs-autohide="true" data-bs-delay="4000">
多个 Toast 堆叠错乱？别依赖默认流式布局
Bootstrap 5 Toast 本身**不提供堆叠管理**，连续 show 多个 Toast，它们会重叠在同一个坐标点，而不是自动上下排列——这点和 BootstrapVue 的 b-toaster-bottom-right 完全不同。
- 纯 CSS 方案：用
flex-column父容器 +gap，但需 JS 控制新增 Toast 插入顺序 - 更稳妥做法：每次 show 前，计算已有 Toast 高度，动态设置
style.top偏移 - 注意
z-index必须逐个递增，否则后出现的可能被盖住 - 移动端小屏幕容易撑出滚动条，建议加
max-height: 80vh和overflow-y: auto
真正省事的方案：换用 bootstrap-vue 或 BlazorBootstrap 这类带原生堆叠逻辑的封装库，而非硬啃原生 Toast。
右下角 Toast 表面简单，但定位、堆叠、销毁时机这几个点，一个没对齐就会导致提示不可见、遮挡按钮、或内存泄漏。尤其是堆叠逻辑，千万别指望 CSS 自动搞定。
