Bootstrap 5面包屑中塞图标应使用内联SVG并设aria-hidden="true"，禁用字体图标简写；图标需依赖currentColor继承链接色，移动端用下拉折叠中间项并配正确ARIA属性。
Bootstrap 5 面包屑里怎么塞图标（不破坏语义和可访问性）
直接用 <svg></svg> 或 <i></i> 插在 <li> 里最简单，但得注意两个关键点：一是图标不能干扰屏幕阅读器对导航层级的理解，二是要控制好图标尺寸和间距，否则在小屏上容易挤成一团。
推荐做法是用 Bootstrap 自带的 visually-hidden 类隐藏纯装饰性文字，而图标本身用 <svg></svg> 内联写，并设 aria-hidden="true"。这样既保留结构语义，又不影响读屏体验。
- 别用
<i class="bi bi-chevron-right"></i>这种 Bootstrap Icons 的简写方式直接放面包屑分隔符位置——它默认没设aria-hidden，部分读屏器会念出 “bi chevron right” - 分隔符图标建议用
<svg></svg>而非字体图标，避免字体加载失败时留白或方块 - 给图标加
width和height（比如1rem），别只靠font-size控制大小，否则在缩放或高 DPI 屏幕下易失真
如何让面包屑里的图标随链接状态自动变色
Bootstrap 的 .breadcrumb-item a 默认继承链接颜色，但图标不会自动跟着变——因为 <svg></svg> 默认是 currentColor，只要确保父级 a 的 color 正确，图标就会同步。问题常出在自定义主题色或覆盖了 color 的 CSS 上。
常见错误是给图标单独写了 fill: #6c757d，结果悬停时链接变蓝，图标还是灰的。
- 图标 SVG 内不要写死
fill，删掉所有fill="..."属性，让它靠currentColor继承 - 如果用了 Bootstrap Icons 的
<i></i>标签，得额外加style="color: currentColor;"，因为它的默认 fill 是固定值 - 检查是否在全局 CSS 里重置了
svg { fill: inherit; }—— 这句其实多余，currentColor默认就生效
移动端折叠面包屑 + 图标提示的实用方案
长路径在手机上撑出横向滚动条，光加图标解决不了根本问题。Bootstrap 5 没内置折叠逻辑，得手动截断 + 用图标暗示“还有更多”。
核心思路不是隐藏中间项，而是把中间层级收进一个带 <svg></svg> 的下拉按钮里，比如用三个点图标 <svg>...</svg> 表示省略。
- 别用
text-overflow: ellipsis直接截断文字——面包屑是导航，必须保证每级都可点击 - 推荐用 JS 动态判断容器宽度，把超出的中间项移入
<div class="dropdown">，触发图标用 <code><svg class="bi bi-three-dots"></svg> - 下拉菜单里的每一项仍需保持
<a href></a>结构，且图标用<svg aria-hidden="true"></svg>，避免读屏器重复播报“三点” - 记得给下拉按钮加
aria-expanded和aria-haspopup="menu"，不然键盘用户无法感知交互状态 -
<nav></nav>只保留 Bootstrap 默认的aria-label="breadcrumb"，别改、别删、别重复加 - 所有纯图标操作控件（如折叠按钮、返回箭头）必须配
aria-label，且文案动词化，比如aria-label="Show more navigation levels" - 如果面包屑某一级是当前页（
class="active"），别给它加aria-current="page"—— Bootstrap 5 的.active已自动绑定该属性，重复加可能引发兼容性问题
为什么 aria-label 不能乱加在面包屑 <nav></nav> 上
很多人想给整个面包屑加 aria-label="Navigation trail"，以为能帮读屏器理解用途。但这是错的：Bootstrap 的 <nav aria-label="breadcrumb"></nav> 已经是标准写法，再叠一层 aria-label 会覆盖原语义，导致读屏器跳过“breadcrumb”这个关键标识。
真正该加 aria-label 的地方，是那些无文本的图标按钮（比如折叠菜单的三点图标），用来说明“展开路径层级”。
