Bootstrap 5 面包屑分隔符应优先通过 CSS 变量 --bs-breadcrumb-divider 修改，如 style="--bs-breadcrumb-divider: '>';" 或 :root { --bs-breadcrumb-divider: "›"; }，值须为英文双引号包裹的字符串；旧版（
Bootstrap 5 的面包屑（breadcrumb）样式修改，**优先用 CSS 自定义变量，别碰伪元素或结构**——这是最稳、最可持续的方式。旧式覆盖 .breadcrumb-item + .breadcrumb-item::before 在 v5 中属于“带伤操作”，容易在响应式断点、RTL 布局或未来升级中失效。
怎么改分隔符为箭头（如 > 或 ›）
Bootstrap 5 把分隔符完全交给 CSS 变量 --bs-breadcrumb-divider 控制，不是写死在 HTML 或伪元素里。
- 内联设置（单页生效）：
<ol class="breadcrumb" style="--bs-breadcrumb-divider: '>'> - 全局设置（推荐）：
:root { --bs-breadcrumb-divider: ">，注意必须是英文双引号包裹的字符串</ol> - 支持 Unicode：想用 →？写成
"\2192"（双反斜杠），直接写→在部分字体下可能显示为方块 - 别写
>这类 HTML 实体——CSS 不解析它，会原样输出字符>，而不是 > 符号
为什么加了 active 类当前项却不高亮
这不是样式问题，而是结构语义错误。Bootstrap 5 的高亮逻辑依赖 aria-current="page"，而非 class="active"（后者在 v5 中已不参与样式计算）。
- 末项必须是
<li class="breadcrumb-item" aria-current="page">当前页</li>，不能带<a></a>标签 - 前面所有项都必须是
<li class="breadcrumb-item"><a href="...">上一级</a></li> - 容器必须是
<ol class="breadcrumb"></ol>，不是<ul></ul>或<div>；外层必须有 <code><nav aria-label="breadcrumb"></nav> - 如果用了自定义主题或重置 CSS，检查
--bs-breadcrumb-active-color是否被意外覆盖 - Bootstrap 5 已移除对
.breadcrumb-item + .breadcrumb-item::before的样式绑定逻辑，变量才是唯一权威来源 - 手动写
.breadcrumb-item + .breadcrumb-item::before { content: ">" }时，若未加!important，大概率被后续加载的 Bootstrap CSS 覆盖（尤其使用 CDN 时） - 伪元素默认按
baseline对齐，在小字号（如0.75rem）下，> 会明显高于文字，需额外加vertical-align: middle和line-height修复 - 在 RTL 页面中，
::before插入位置仍为“左侧”，导致箭头方向反向；而变量驱动的分隔符会随文本流自动翻转 - 文字色：
--bs-breadcrumb-color（非当前项） - 当前项色：
--bs-breadcrumb-active-color（影响aria-current="page"项） - 分隔符色：
--bs-breadcrumb-divider-color - 垂直间距：
--bs-breadcrumb-padding-y（控制上下内边距） - 项间水平间距：
--bs-breadcrumb-item-padding-x（影响分隔符左右留白） - 若用 Sass 构建项目，直接在
_variables.scss里重定义这些值，编译后自动注入，无需 runtime CSS 注入
用伪元素手动覆盖 ::before 会出什么问题
能临时生效，但代价高：破坏变量机制、干扰 RTL、响应式换行错位、与屏幕阅读器协作异常。
自定义颜色/间距该动哪些变量
所有视觉表现都由一组 CSS 变量控制，改它们比写一堆选择器更干净、更易维护。
真正容易被忽略的点是：**变量只在 Bootstrap 5 及 4.6.2+ 生效，老项目若混用 4.5 或更低版本，--bs-* 会被浏览器直接忽略**。上线前务必用开发者工具检查 computed styles 中该变量是否被识别——没生效，就说明版本不对，得切回伪元素方案，但要同步清理所有冲突规则。
