bootstrap面包屑必须用结构，否则分隔符不显示、响应式失效、屏幕阅读器无法识别；分隔符由css伪元素控制，需用--bs-breadcrumb-divider变量修改；当前项需同时加class="active"和aria-current="page"才能高亮且可访问。
Bootstrap 面包屑必须用 <nav></nav> + <ol class="breadcrumb"></ol> 结构，否则分隔符不显示、响应式失效、屏幕阅读器无法识别——这不是可选建议，是语义和样式双重依赖的硬性要求。
为什么用 <ul></ul> 替代 <ol></ol> 会导致分隔符消失
Bootstrap 的分隔符（如 /）由 CSS 选择器 .breadcrumb > li + li:before 渲染，它依赖 <ol></ol> 的子元素相邻关系。换成 <ul></ul> 后，虽然视觉上可能“看起来差不多”，但该选择器匹配失败，伪元素不会插入。
- 检查浏览器开发者工具 Elements 面板，确认
<ol class="breadcrumb"></ol>是否被正确包裹，且内部每个层级都是<li class="breadcrumb-item"> - 不要手动在 HTML 里写
/或>，那是 CSS 控制的，写死会破坏语义和换行逻辑 - 如果用了旧版 Bootstrap（如 4.3 及以下），
<ol></ol>是唯一能触发该伪元素的选择器，<ul></ul>完全无效
怎么把分隔符从 / 换成 > 或 ›
Bootstrap 4.5+ 支持 CSS 自定义变量 --bs-breadcrumb-divider，这是唯一推荐方式；低于 4.5 则需覆盖伪元素，且容易因权重不足失效。
- 内联设置最稳妥：
<ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';"></ol>（注意单引号包裹符号） - 全局修改写在
<style></style>块或 CSS 文件中：:root { --bs-breadcrumb-divider: "›"; }（必须用英文双引号） - 避免写
content: ">"—— HTML 实体会被解析失败，要用"\3E "或直接字符串'>' - SVG 图标需用
url()函数：style="--bs-breadcrumb-divider: url('data:image/svg+xml;utf8,...');"，但小屏易错位，慎用
为什么加了 class="active" 当前项还是没高亮
高亮失效几乎全是结构问题。Bootstrap 对当前页项有两个并列样式触发条件：.breadcrumb-item.active 和 .breadcrumb-item[aria-current="page"]，但它们生效的前提是父容器是合规的 <ol class="breadcrumb"></ol>。
- 当前页
<li>必须是最后一个，且不能包含<a></a>标签（链接应只出现在非当前项） - 必须同时加
class="breadcrumb-item active"和aria-current="page"：前者控制样式，后者保障可访问性 - 如果用了自定义 Sass 编译，检查是否意外覆盖了
$breadcrumb-divider变量或禁用了相关 CSS 规则 - 不要给
.breadcrumb设white-space: nowrap，这会让所有项挤在一行，小屏直接溢出
响应式换行失效时该查什么
Bootstrap 5 和 4.6+ 的面包屑默认基于 Flex 布局自动换行，但一旦结构或 CSS 干预过强，就会卡死在单行。
- 确保
<nav aria-label="breadcrumb"></nav>存在——缺失它，部分辅助技术不识别该区域为导航 - 检查是否有外部 CSS 给
.breadcrumb或.breadcrumb-item设置了flex-shrink: 0、min-width或固定width - 长文本（如带 query 参数的路径）换行后间距松散？这是 Flex 对
inline元素的正常表现，可通过调整--bs-breadcrumb-item-padding-x微调 - 真遇到极端窄屏断词难看，可在
<li>内用<span></span>包裹文字，并设word-break: break-all，但仅限必要场景
最容易被忽略的是 aria-current="page" 的强制存在——它不参与视觉渲染，但漏掉就等于放弃无障碍支持，而且某些自动化测试工具会直接报错。别把它当成“锦上添花”的装饰属性。
