Bootstrap 警告框带图标显示 Alert内容布局-Bootstrap教程-PHP中文网

bootstrap 5 警告框添加 svg 图标需内联 bootstrap 自带 svg 并配合 d-flex、align-items-center 实现垂直居中，注意引入 svg sprites、避免 flex-shrink-0 压缩，并确保图标语义化（aria-label 或 role="img"）。

bootstrap 警告框带图标显示 alert内容布局

Bootstrap 5 警告框如何添加 SVG 图标

Bootstrap 5 默认不自带图标，alert 组件本身也不自动渲染图标 —— 所以你看到的“无图标”不是配置错了，是压根没加。

推荐直接内联 Bootstrap 自带的 SVG 图标（轻量、无额外请求），放在 <div class="alert"> 内最前面： <pre class="brush:php;toolbar:false;"><div class="alert alert-warning d-flex align-items-center"> <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"></use></svg><div>警告：磁盘空间不足</div> </div></pre> <p>注意三点：</p> <ul> <li> <code>d-flex 和 align-items-center 是必须的，否则图标和文字无法垂直居中对齐

flex-shrink-0 防止 SVG 在窄屏下被压缩变形

需提前在页面中引入 Bootstrap 的 SVG sprites（通常通过 <svg><defs>...</defs></svg> 注入，或使用官方 CDN 的 bootstrap-icons）

自定义图标时 class 冲突导致布局错乱

用 Font Awesome 或自定义 <i></i> 标签加图标时，常见文字换行、上下偏移、行高不一致等问题。根本原因是 alert 默认的 padding 和 line-height 是按纯文本设计的。

稳妥做法是重置图标容器的排版行为：

<div class="alert alert-danger">
  <span class="d-inline-flex align-items-center me-2">
    <i class="fa-solid fa-triangle-exclamation text-danger"></i>
  </span>
  操作失败，请重试。
</div>

关键点：

不用 <i></i> 直接撑开行高，改用 <span class="d-inline-flex align-items-center"></span> 包裹图标
加 me-2（margin-end）提供右侧间距，避免图标紧贴文字
如果用了 font-size: 1.25rem 等放大图标，记得同步调高 line-height 或用 align-items-center 对齐

Alert 内容多行时图标与文字不对齐

当警告内容换行（比如含 <br>、<p></p> 或长文本自动折行），图标容易只对齐第一行，下面几行左边缘“悬空”。

解决方式不是加 text-indent，而是让整个内容区形成一个弹性块：

VPS Bootstrap

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

下载

<div class="alert alert-info">
  <div class="d-flex">
    <svg class="bi flex-shrink-0 me-2 mt-1" ...></svg><div>
      <h5 class="mb-1">系统通知</h5>
      <p class="mb-0">您的配置已保存，但部分设置需重启服务后生效。</p>
    </div>
  </div>
</div>

要点：

外层 d-flex 把图标和文字内容作为两个 flex item 排列
mt-1 是微调 SVG 垂直位置的常用手段（因 <h5></h5> 上边距比普通文本大）
内部文字用 <div> 包裹而非直接放 <code><p></p>，避免默认 margin 干扰 flex 布局
IE11 兼容下图标不显示或错位

IE11 不支持 flex-shrink-0 和部分 SVG use 语法，且 d-flex 类会失效。若仍需支持，得降级处理：

放弃 SVG sprite，改用 base64 编码的内联 PNG 或字体图标，并手动写 CSS：
```
.alert-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background: url("data:image/png;base64,iVBORw...") no-repeat center;
  background-size: contain;
  vertical-align: middle;
  margin-right: 0.5rem;
}
```
然后在 HTML 中：
```
<div class="alert alert-warning">
  <span class="alert-icon"></span>警告：证书将在7天后过期。
</div>
```
这种写法虽冗余，但能避开 IE11 对 flex + SVG 的双重兼容问题。现代项目可忽略此节 —— 除非你真在维护一个还在跑 IE11 的后台系统。

真正容易被忽略的是：图标语义化。别只加视觉符号，务必配 aria-label 或 role="img"，否则屏幕阅读器用户完全不知道这是警告还是提示。