使用messages.error()时Bootstrap警告框加载后立即消失问题排查

我来帮你排查这个问题，先梳理下你遇到的核心现象：只有messages.error()对应的alert-danger警告框会在页面加载后快速消失，其他类型消息正常显示，但去掉alert-dismissible fade in类后所有消息都能正常显示。这说明问题大概率出在Bootstrap的alert组件配置或者前端代码上，下面是几个可能的原因和对应的解决方案：

1. Bootstrap版本与alert类不匹配 #

你当前用的fade in是Bootstrap 3的写法，如果你使用的是Bootstrap 4或5，这个类组合会导致过渡动画异常，可能让alert在加载后瞬间隐藏。

• Bootstrap 3：保持fade in，同时确保按钮上有data-dismiss="alert"属性
• Bootstrap 4：改用fade show，按钮保留data-dismiss="alert"
• Bootstrap 5：改用fade show，按钮属性改为data-bs-dismiss="alert"

修正后的alert结构（以Bootstrap 5为例）：

<div class="alert {{ message.tags }} alert-dismissible fade show">
  <button type="button" class="close" aria-label="Close" data-bs-dismiss="alert">
    <span aria-hidden="true">&times;</span>
  </button>
  {% if message.tags == 'alert-info' %}
    <p>{{ message }}<br> You have <strong>{{users}}</strong> user{{users|pluralize}}<br> ,around <strong>{{non_users}}</strong> non user{{non_users|pluralize}}</p>
  {% else %}
    <p>{{ message }}</p>
  {% endif %}
</div>

2. 关闭按钮缺少必要属性 #

你的关闭按钮目前没有添加Bootstrap alert组件需要的关闭触发属性，这会导致alert-dismissible的行为异常，虽然不会直接导致自动消失，但可能干扰组件初始化逻辑，间接引发问题。

不管用哪个Bootstrap版本，都要给按钮加上对应的关闭属性：

• Bootstrap 3/4: data-dismiss="alert"
• Bootstrap 5: data-bs-dismiss="alert"

3. 自定义CSS/JS导致alert-danger被自动隐藏 #

检查你的项目中是否有针对.alert-danger的自定义样式或脚本，比如设置了自动隐藏的动画或定时器：

• 排查CSS中是否有类似代码：

  .alert-danger {
    animation: autoHide 2s ease-out forwards;
  }
  @keyframes autoHide {
    to { opacity: 0; visibility: hidden; }
  }
  

• 排查JS中是否有针对.alert-danger的自动移除逻辑：

  document.addEventListener('DOMContentLoaded', function() {
    const dangerAlerts = document.querySelectorAll('.alert-danger');
    dangerAlerts.forEach(alert => {
      setTimeout(() => alert.remove(), 2000);
    });
  });
  

如果有这类代码，要么删除，要么修改为对所有alert类型生效，或者只针对特定类型。

额外提示：模板中的判断条件有误 #

注意到你模板里写了{% if message.tags == 'info' %}，但在MESSAGE_TAGS配置中，INFO类型对应的是alert-info，所以message.tags的值是alert-info而不是info，这个判断永远不会触发。你需要把条件改成{% if message.tags == 'alert-info' %}才能显示额外的用户统计内容。

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