最稳方式是用--bs-breadcrumb-divider css变量修改分隔符，bootstrap 5及4.6.2+原生支持，需加英文双引号如">"，全局设于:root或局部内联，务必在bootstrap样式后加载。
直接用 --bs-breadcrumb-divider 变量改分隔符最稳
Bootstrap 5 和 4.6.2+ 原生支持这个 CSS 变量，不用动伪元素、不冲突、不破坏可访问性。旧版 Bootstrap（如 4.0–4.5）不识别它，强行写会无效。
必须确保值是带英文双引号的字符串，比如 ">" 或 "\2192"（Unicode 箭头），单引号或不加引号都不行。
- 局部修改：在
<ol class="breadcrumb"></ol>上加内联样式，style="--bs-breadcrumb-divider: '>';" - 全局修改：在
:root或.breadcrumb里声明，例如:root { --bs-breadcrumb-divider: "»"; } - 注意加载顺序：自定义 CSS 必须在 Bootstrap 样式表之后引入，否则变量被覆盖
.breadcrumb-item::before 覆盖方式容易踩坑
这是老式写法，Bootstrap 5 已弃用 .breadcrumb > li + li::before 规则，但部分项目仍残留依赖。强行覆盖需更高权重选择器，且易引发副作用。
常见错误现象包括：分隔符重复出现、对齐错位、小屏下图标和文字重叠、屏幕阅读器误读“slash”。
- 必须用完整选择器
.breadcrumb-item + .breadcrumb-item::before，不能简写成.breadcrumb::before - 先清空默认：
.breadcrumb-item + .breadcrumb-item::before { content: none !important; } - 再用
.breadcrumb-item:not(:last-child)::after重置，更精准控制位置 - 记得设
display: inline-block和margin: 0 0.5rem，否则图标可能不显示或间距崩坏
用 Font Awesome 图标当分隔符要注意编码和字体加载
想用 \f105（angle-right）这类图标，不能直接写 content: "f105"，必须加反斜杠转义，并确保字体已正确载入。
Font Awesome v6 的 solid 图标要配 font-weight: 900，v5 则是 400 或 900 看图标类型；不设会导致图标显示为方块。
- 正确写法：
content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; - 检查 CDN 是否加载了
all.css，本地部署则确认@font-face路径没 404 - 响应式断点（如
sm下）不会自动切换你的自定义图标，需手动加@media (max-width: 576px)重置 - 图标容器建议加
aria-hidden="true"，避免屏幕阅读器重复播报
SVG 分隔符要用 url()，不能塞 HTML 标签
content 伪类不支持插入 SVG 元素或 HTML 字符串，只能用 url() 引入外部文件或 data URL。
data URL 必须严格 URL 编码：尖括号 → <code>%3C，> → %3E，空格 → %20。未编码会直接失效。
- 推荐用在线工具生成 data URL，例如：
content: url("data:image/svg+xml,%3Csvg width='12' height='12'%3E%3Cpath d='M4 8l4-4 4 4'/%3E%3C/svg%3E"); - 外部 SVG 路径需返回
Content-Type: image/svg+xml，否则 Chrome/Firefox 拒绝渲染 - SVG 内必须显式声明
width和height，否则可能拉伸或不可见 - 别忘了设
vertical-align: middle，否则和文字基线不对齐
--bs-breadcrumb-divider。其他方式，本质都是在绕过设计约束，越往后维护越容易出岔子。
