面包屑导航必须用 结构才符合语义和Bootstrap 5规范，其中表层级、aria-label支持无障碍，li需加breadcrumb-item类，当前页项用active且设aria-current="page"，分隔符由CSS自动生成，固定定位推荐position-sticky并注意父容器约束。
面包屑导航用 nav + ol 结构才符合语义和 Bootstrap 5 规范
Bootstrap 官方不提供独立的 breadcrumb 组件类（如 v4 的 .breadcrumb），但 v5+ 明确推荐用语义化 HTML 配合内置工具类。硬套旧版写法或用 div 堆砌，会导致无障碍支持失效、SEO 友好性下降，且响应式断点行为异常。
正确结构必须是：<nav aria-label="breadcrumb"><ol class="breadcrumb">...</ol></nav>。其中 ol 表示有序层级，aria-label 让读屏软件识别用途。
-
li必须用class="breadcrumb-item"，否则样式不生效 - 当前页项要加
class="active"，且不能带<a></a>标签（否则会触发点击行为） - 分隔符由 Bootstrap 自动注入（CSS
::before），无需手动写/或>
后台顶部固定位置需配合 position-sticky 和 top 偏移
后台常把面包屑放在顶部导航栏下方、主内容区上方，且希望滚动时保持可见。直接用 position: fixed 会脱离文档流，导致下方内容上移；而 sticky 更安全，但必须满足父容器有高度且不设 overflow: hidden。
典型写法：
<header class="navbar">...</header>
<nav class="breadcrumb-container position-sticky top-0 bg-white z-2">
<div class="container-fluid py-2">
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item"><a href="#">系统管理</a></li>
<li class="breadcrumb-item active" aria-current="page">用户列表</li>
</ol>
</nav>
</div>
</nav>
<main class="container-fluid pt-3">...</main>
-
top-0是 Bootstrap 5 的间距工具类，等价于top: 0；若顶部有navbar，建议改用top-xx（如top-3）避免重叠 -
z-2确保层级高于主内容，但低于可能存在的侧边栏遮罩 -
bg-white提供背景色，否则滚动时文字会透出底层内容
动态生成面包屑时，注意 aria-current="page" 必须由 JS 精准控制
单页应用（如 Vue/React 后台）中，面包屑常随路由变化。仅靠 CSS 类 active 不足以满足无障碍要求——屏幕阅读器依赖 aria-current="page" 判断当前位置。
- 服务端渲染可直接输出该属性；客户端渲染必须在路由切换后，用 JS 找到对应
li并设置：el.setAttribute('aria-current', 'page') - 不要给所有
breadcrumb-item都加aria-current，否则语义混乱 - 如果当前页无链接（如“新增用户”表单页），
li内应为纯文本，而非空<a href="#"></a>，否则键盘用户会陷入无效焦点
自定义分隔符或颜色容易破坏 Bootstrap 的 CSS 层叠顺序
想把默认的斜杠换成箭头（→）或修改文字颜色？别直接覆盖 .breadcrumb-item::before，Bootstrap 5 的分隔符样式写在 node_modules/bootstrap/scss/breadcrumb.scss 里，且依赖 $breadcrumb-divider 变量。
- 最稳妥方式：在自定义 SCSS 中重定义变量，再重新编译：
$breadcrumb-divider: "→"; - 若只能用 CSS，务必用更高优先级选择器，例如：
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "→" !important; } - 修改颜色时，注意
.breadcrumb-item a和.breadcrumb-item.active的文本色需有足够对比度（至少 4.5:1），否则通不过 WCAG 检查
实际项目里，最容易被忽略的是 aria-current 的同步时机和 position-sticky 的父容器约束——这两个点一旦出错，要么功能残缺，要么布局崩塌，调试起来比样式问题更耗时。
