bootstrap 5 警告框插入自定义 svg 图标需用 d-flex align-items-center 确保垂直对齐，me-2 控制间距，内联 style 设宽高为 1.25rem，并用 var(--bs-danger) 动态适配颜色。
bootstrap 5 警告框如何插入自定义 svg 图标
bootstrap 5 默认移除了内置图标（如 alert-danger 不再自带 ❌），必须手动插入图标。直接往 <div class="alert"> 里加 <code><svg></svg> 是最可靠的方式，但要注意尺寸和垂直对齐。
常见错误是把图标写在 alert-heading 后面却没留空格，或用 float: left 导致文本换行错乱。推荐用 Flex 布局控制：
<div class="alert alert-warning d-flex align-items-center">
<svg class="me-2" width="20" height="20" fill="currentColor" viewbox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.454.886.29 1.993.867 2.57 1.08.98 2.909 1.088 3.998.089l.325-.324a1 1 0 0 0 .25-.25.998.998 0 0 0 0-.25.998.998 0 0 0-.25-.25l-.324-.325c-.999-1.09-.89-2.92.089-3.998.577-.577 1.685-.82 2.57-.867l11.867-.165c.886-.047 1.993.29 2.57.867.98 1.08.888 2.909-.089 3.998a1 1 0 0 0 .25.25 1 1 0 0 0 .25 0 1 1 0 0 0 0-.25l-.165-11.867c-.047-.886.29-1.993.867-2.57.98-1.08 2.909-.89 3.998.089l.325.324a1 1 0 0 0 .25.25 1 1 0 0 0 .25 0 1 1 0 0 0 0-.25l-.324-.325c-1.09-.999-.89-2.909.089-3.998a1.13 1.13 0 0 0 0-1.96l-6.867-6.868z"></path></svg><div>
<h4 class="alert-heading">警告</h4>
<p class="mb-0">请检查输入项是否填写完整。</p>
</div>
</div>
-
d-flex align-items-center确保图标与文字基线对齐，比vertical-align: middle更稳定 -
me-2提供右侧间距，避免图标紧贴文字；若用ms-2则图标会出现在右侧（适合右对齐场景） - SVG 的
width/height建议设为20，过大易撑开 alert 高度，过小则看不清
图标位置不居中？检查 alert 内部 padding 和 display 类型
默认 alert 使用 display: block，内部元素若未显式设 display: flex 或 align-items，图标容易顶部对齐或下沉。尤其当 alert 包含多段文本（h4 + p + hr）时，高度变化会让图标“漂移”。
关键修复点：
- 确保外层 alert 有
d-flex align-items-center，而不是只给图标加align-self-center - 避免同时使用
text-center和d-flex—— 二者冲突，text-center会让子元素块级居中，破坏 flex 对齐 - 如果图标仍偏高，检查是否误加了
mt-*或pt-*类，这些会干扰 flex 的基线计算
需要右对齐图标？别用 text-end，改用 ms-auto
想把图标放在警告框右侧（比如配合关闭按钮），不能用 text-end —— 它作用于文本对齐，对 SVG 无效；也不建议 float: right，会脱离文档流导致后续内容错位。
正确做法是利用 Bootstrap 5 的 margin 工具类：
- 给图标容器（如
<svg></svg>或包裹它的<span></span>）加ms-auto，它会在 flex 容器中自动推到右侧 - 若图标和关闭按钮都要靠右，把它们包进同一个
<div class="d-flex">，再给该 div 加 <code>ms-auto - 注意：加了
ms-auto后，左侧文字需用flex-grow-1占满剩余空间，否则文字会左挤
图标响应式失效？优先用内联 style 控制尺寸
Bootstrap 的 fs-* 类（如 fs-5）对 SVG 填充色有效，但对宽高无效；h-*/w-* 类在某些版本中可能被 alert 的 max-width 截断。最稳妥的是用内联 style：
<svg style="width: 1.25rem; height: 1.25rem;" ...></svg>
这样能确保图标随根字号缩放，且不受父容器 max-width 干扰。如果项目已全局重设 font-size，这个方案比硬编码 px 更健壮。
真正容易被忽略的点：图标颜色应随 alert 类型动态适配。不要写死 fill="#dc3545"，而要用 Bootstrap 的 CSS 变量，例如 fill: var(--bs-danger) —— 这样换主题色时图标会自动同步。
