Bootstrap 5 Toast 默认不显示，需手动初始化并用 position-fixed + bottom-0 + end-0 定位右下角；show 类仅为状态标记，须调用 .show() 方法；多 Toast 需动态计算 bottom 和 z-index 以避免遮挡。
bootstrap 5 的 toast 默认不显示在右下角——它根本不会自动显示，连位置都谈不上。必须手动初始化 + 正确定位容器，否则 .toast 元素只是个隐藏的 dom 节点。
为什么加了 fixed-bottom 还是贴底被截断？
因为 fixed-bottom 只是 Bootstrap 的工具类别名，它不带 position: fixed 声明（实际由 .position-fixed 提供）。单独用 fixed-bottom，浏览器按默认文档流渲染，Toast 会塌缩、文字被裁、点击失灵。
- 必须显式加
position-fixed类作为基础定位 - 再组合
bottom-0+end-0对齐右下角 - 用
p-3或style="right: 1rem; bottom: 1rem;"避开屏幕边缘和 footer - 外层容器要带
aria-live="polite"和aria-atomic="true"，否则多 Toast 时 z-index 和堆叠逻辑失效
show 类没用？得先初始化实例
Bootstrap 5 把控制权交给 JS：光写 <div class="toast show"> 不会触发动画或显示，show 只是状态标记，不是开关。
- 必须用
new bootstrap.Toast(el)创建实例 - 再调用
.show()方法，例如：bootstrap.Toast.getInstance(toastEl)?.show() || new bootstrap.Toast(toastEl).show() - 动态插入的 Toast（比如用 JS createElement），得先 append 到 DOM，再初始化，否则报错
Cannot read properties of null
多个 Toast 堆一起，怎么错开不遮挡？
Bootstrap 自身不管理多个 Toast 的垂直堆叠，全靠你控制 bottom 偏移和 z-index。直接塞进同一个 .position-fixed 容器里，后弹的会盖住前弹的，或者关闭按钮点不中。
- 给每个 Toast 加唯一
id，用数组维护队列，记录已挂载的节点 - 新 Toast 插入时，按队列长度动态设
style.bottom = `calc(1rem + ${index * 80}px)`（假设单条高约 72px + 8px 间距） -
z-index不能写死，建议用style.zIndex = String(Date.now() + index)确保顺序递增 - 任一 Toast 销毁后，重算剩余项的
bottom和z-index，否则空缺位置会残留
真正麻烦的不是定位本身，而是多 Toast 场景下的 DOM 生命周期管理——初始化、排队、偏移计算、销毁同步、z-index 动态分配，这些没法靠几个 CSS 类解决。
