升级Bootstrap 5后toastr配置项失效，寻求解决方案

toastr 2.1.4 与 Bootstrap 5 兼容性问题 #

toastr 2.1.4 是2016年发布的旧版本，完全不兼容Bootstrap 5。Bootstrap 5在DOM结构、样式类名以及内部JS逻辑上做了大量改动，而这个老旧版本的toastr没有针对这些变化做适配，会导致包括timeOut、extendedTimeOut在内的核心配置失效，出现提示框无法按设置时长显示的问题。

如果想继续使用toastr，建议升级到最新版本（目前v2.1.5+已适配Bootstrap 5），新版本修复了Bootstrap 5的兼容性问题，你的原有配置代码可以直接正常工作。

替代组件推荐（无需预定义DOM，支持动态内容） #

若不想升级toastr，以下几款组件可满足需求：

SweetAlert2 #

功能强大的模态/提示组件，支持动态设置标题、内容，无需预先在DOM中定义元素，且完美适配Bootstrap 5样式。示例代码：

// 错误提示示例
Swal.fire({
  icon: 'error',
  title: 'Some Title',
  text: 'Some message',
  timer: 5000, // 自动关闭时长
  timerProgressBar: true
});

Notyf #

轻量级纯JS提示库，体积小，API简洁，支持自定义样式和超时时间，动态创建提示框：

// 初始化配置
const notyf = new Notyf({
  duration: 5000,
  position: {
    x: 'right',
    y: 'top',
  }
});

// 触发错误提示
notyf.error('Some message');
// 带标题的提示可通过自定义HTML实现
notyf.open({
  type: 'error',
  message: '<strong>Some Title</strong><br>Some message'
});

Toastify JS #

专注于Toast提示的组件，纯JS实现，无需依赖，动态生成提示框，支持自定义位置、时长：

Toastify({
  text: "<strong>Some Title</strong><br>Some message",
  duration: 5000,
  close: true,
  gravity: "top", // 提示位置
  position: "right",
  stopOnFocus: true, // 鼠标悬停时暂停计时
  style: {
    background: "#dc3545", // Bootstrap 5危险色
  }
}).showToast();

内容的提问来源于stack exchange，提问作者Avner Moshkovitz