Bootstrap 4+ 面包屑分隔符需通过 CSS 变量 --bs-breadcrumb-divider 修改，可内联设置或在 :root 中全局覆写；active 高亮失效多因结构错误，须确保末项 <li> 无 <a> 且含 aria-current="page"；自定义样式应优先修改对应 CSS 变量而非直接覆盖选择器。
怎么改面包屑的分隔符（比如换成 > 或 »）
bootstrap 4+ 默认用 / 作分隔符，但它是通过 css 变量控制的，不是写死在 html 里。直接改 html 结构或加伪元素容易失效，得从变量入手。
- 最稳妥的方式是在
<nav>或<ol class="breadcrumb">标签上加内联样式：style="--bs-breadcrumb-divider: '>';" - 如果要全局统一，就覆写 CSS 变量：
:root { --bs-breadcrumb-divider: "»"; }，注意引号必须是英文双引号，否则不生效 - 别去动
.breadcrumb > li + li:before这类老式写法——Bootstrap 5 已弃用该规则，强行覆盖可能被后续版本忽略
为什么加了 active 类，当前项还是没高亮？
常见原因是结构写错了。Bootstrap 面包屑依赖严格的语义化嵌套：必须用 <ol> 包裹 <li>，且只有最后一个 <li> 能加 active，里面不能放 <a>。
- ✅ 正确：
<li class="active" aria-current="page">Dashboard</li> - ❌ 错误：
<li class="active"><a href="#">Dashboard</a></li>（active加在带链接的<li>上，当前页不该有链接） - 漏掉
aria-current="page"不影响样式，但会降低可访问性，屏幕阅读器可能读不出“这是当前位置”
自定义颜色/间距时，该覆盖哪些 CSS 类？
别一上来就写 .breadcrumb li a { color: red; } ——这样太暴力，容易漏掉悬停、禁用等状态，还可能和深色模式冲突。
- 优先改 CSS 变量：
--bs-breadcrumb-color（文字色）、--bs-breadcrumb-active-color（当前项色）、--bs-breadcrumb-divider-color（分隔符色） - 行高和间距由
--bs-breadcrumb-padding-y和--bs-breadcrumb-item-padding-x控制，比直接调padding更稳定 - 如果用了 Sass，直接在变量文件里重定义这些值，编译后自动生效，不会污染全局
Bootstrap 3 和 Bootstrap 5 的面包屑结构差异大吗？
结构本身几乎一样，都是 <ol class="breadcrumb"> + <li>，但关键区别在语义和默认行为。
- Bootstrap 3 用
<ul>也能凑合，但官方文档已不推荐；Bootstrap 5 强制要求<ol>，因为路径有明确顺序，<ol>是语义正确选择 - Bootstrap 5 移除了所有 IE 兼容 hack，比如不再支持
.divider类；分隔符完全靠--bs-breadcrumb-divider变量驱动 - 如果你还在维护旧项目，别直接把 BS5 的 CSS 变量写法抄到 BS3 里——它不认识
--bs-*，会静默失败
