Bootstrap Toast消息提示框 Bootstrap如何制作右下角通知-Bootstrap教程-PHP中文网

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"> 不生效（除非同时加 <code>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 里无效。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

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">

<h3>多个 Toast 堆叠错乱？别依赖默认流式布局</h3>
<p>Bootstrap 5 Toast 本身**不提供堆叠管理**，连续 show 多个 Toast，它们会重叠在同一个坐标点，而不是自动上下排列——这点和 BootstrapVue 的 <code>b-toaster-bottom-right</code> 完全不同。</p>
<ul>
<li>纯 CSS 方案：用 <code>flex-column</code> 父容器 + <code>gap</code>，但需 JS 控制新增 Toast 插入顺序</li>
<li>更稳妥做法：每次 show 前，计算已有 Toast 高度，动态设置 <code>style.top</code> 偏移</li>
<li>注意 <code>z-index</code> 必须逐个递增，否则后出现的可能被盖住</li>
<li>移动端小屏幕容易撑出滚动条，建议加 <code>max-height: 80vh</code> 和 <code>overflow-y: auto</code>
</li>
</ul>
<p>真正省事的方案：换用 <code>bootstrap-vue</code> 或 <code>BlazorBootstrap</code> 这类带原生堆叠逻辑的封装库，而非硬啃原生 Toast。</p>
<p>右下角 Toast 表面简单，但定位、堆叠、销毁时机这几个点，一个没对齐就会导致提示不可见、遮挡按钮、或内存泄漏。尤其是堆叠逻辑，千万别指望 CSS 自动搞定。</p>
</div>