Bootstrap Alert关闭后默认移除DOM节点，若仅隐藏则因未加载bootstrap.bundle.min.js或data-bs-dismiss属性失效；需确保JS正确加载、结构合规，并用d-none类替代remove实现持久化控制。
Alert关闭后不消失，只隐藏？
Bootstrap的alert组件默认带data-bs-dismiss="alert"时，点击关闭按钮只会移除DOM节点——但如果你用了自定义JS或没引入Bootstrap JS，很可能发现警告框只是“看不见了”，display: none被加上，而元素还在DOM里。根本原因是Alert插件依赖bootstrap.bundle.js（含Popper和Bootstrap JS），纯CSS版本无法触发销毁逻辑。
实操建议：
- 确认已加载
bootstrap.bundle.min.js（不是bootstrap.min.css单独文件） - 检查控制台是否报错
TypeError: bootstrap.Alert is not a constructor，说明JS未正确加载 - 关闭按钮必须是
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>结构，data-bs-dismiss属性不能拼错
想加淡出动画但页面闪一下？
Bootstrap 5默认关闭时用fade类实现淡出，但若父容器有overflow: hidden或警告框本身设置了position: absolute，动画过程中可能被截断或布局塌陷，导致视觉上“闪一下”。关键在于动画结束时机与DOM移除的配合。
实操建议：
- 确保警告框外层没有意外的
overflow: hidden（比如卡片、模态框body内） - 不要手动给
.alert加transition，Bootstrap已内置.fade的opacity和transform过渡 - 如果需要更长动画，覆盖CSS时改
.alert.fade的transition-duration，而非重写整个动画规则
关闭后想保留DOM或触发回调？
原生Alert销毁后不提供回调钩子，DOM直接remove()。若需关闭后执行清理（如清空表单、重置状态），得监听closed.bs.alert事件。
实操建议：
- 用
document.addEventListener('closed.bs.alert', handler)捕获全局事件，或对单个alert用myAlert.addEventListener('closed.bs.alert', ...) - 事件对象
event.target指向被关闭的.alert元素，可据此做针对性操作 - 若想“隐藏而不删除”，可手动阻止默认行为：
event.preventDefault()，再加element.classList.add('d-none')，但要注意后续需手动管理显示逻辑
用jQuery或Vue时Alert不生效？
Bootstrap 5彻底放弃jQuery支持，所有JS API都是ES模块风格。如果你项目里混用jQuery绑定click事件去调$(...).alert('close')，会报$(...).alert is not a function；Vue中直接v-if控制显示，又会绕过Bootstrap的销毁流程，导致fade动画失效。
实操建议：
- jQuery用户：升级到Bootstrap 4.x（仍支持jQuery），或改用原生JS调用
bootstrap.Alert.getInstance(el).close() - Vue用户：用
v-show替代v-if保持DOM存在，再结合@transition:after-leave钩子模拟关闭效果；或封装一个Alert组件，内部用ref调用Bootstrap实例 - SSR环境（如Nuxt）注意：服务端渲染时
window不存在，Alert初始化必须放在onMounted或mounted()生命周期里
showing类、过渡结束移除节点，环环相扣。漏掉任一环节，都会卡在某个状态里。 
