Bootstrap 5 面包屑分隔符应通过修改 CSS 变量 --bs-breadcrumb-divider 实现，值需为带引号字符串（如 ">" 或 "\2192"），确保在 Bootstrap 样式后加载且拼写正确。
Bootstrap 5 面包屑分隔符怎么换？直接改 CSS 变量最稳
bootstrap 5 默认用 / 作分隔符，但想换成箭头（如 >）、竖线（|）或图标，别碰 js 或重写 html 结构——它原生支持 css 变量控制，改对地方一行就生效。
常见错误是去覆盖 ::before 伪元素内容，结果在响应式断点下失效，或者和 RTL 布局冲突。根本原因是没意识到 Bootstrap 5 把分隔符抽成了 --bs-breadcrumb-divider 这个 CSS 自定义属性。
- 在
:root或.breadcrumb上设置--bs-breadcrumb-divider，值必须是带引号的字符串，比如">"或"\203A"（Unicode 箭头） - 如果要用 SVG 图标，得转成 data URL 或用背景图，不能直接写
<svg></svg>—— 浏览器不解析 HTML 实体进 CSS 变量 - 旧项目混用 Bootstrap 4/5 时，4 版本靠
$breadcrumb-dividerSass 变量，5 版本只认 CSS 变量，Sass 编译后不生效
用 Unicode 或实体字符替换斜杠，兼容性比图标强得多
多数人想换箭头，第一反应是贴个 > 或 →，但要注意：HTML 实体（如 →）不能直接塞进 CSS 变量，得转成 Unicode 编码或用双引号包裹的纯字符。
比如 > 写成 ">" 没问题；→ 要写成 "\2192"（注意双反斜杠），否则浏览器当普通字符处理，可能显示为空格或方块。
-
">"→ 渲染为 >，字体继承父级，无额外请求 -
"\276F"→ 渲染为 ⟯（粗箭头），适合强调层级感 - 避免用
"A"（单反斜杠）—— CSS 解析失败，分隔符消失 - 移动端小字号下，
|比/更易识别，可设为"|"
自定义图标分隔符：别用 ::before 覆盖，改伪元素内容更可靠
真要上图标（比如 Font Awesome 的 fa-chevron-right），别在 .breadcrumb-item + .breadcrumb-item::before 里硬写 content: "→" —— 这会和 Bootstrap 自带的变量逻辑打架，且无法响应 RTL。
正确做法是保留 Bootstrap 的 --bs-breadcrumb-divider 控制流，把图标转成内联 SVG 或 Unicode，再注入变量。若必须用字体图标，确保其 class 已加载且字体文件就绪。
- SVG 推荐 data URL：
--bs-breadcrumb-divider: "url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='m1.5 1 3 3-3 3' stroke='%236c757d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E")" - Font Awesome 必须用
font-family: "Font Awesome 6 Free"+content: "\f054"，但得自己补全伪元素样式，不如变量方案干净 - 所有自定义分隔符在打印样式表中默认不显示，如需保留，额外加
@media print规则
为什么改了变量没反应？检查这三处
改完 --bs-breadcrumb-divider 没变化，大概率不是代码错，而是加载顺序、作用域或拼写问题。
- CSS 文件是否在 Bootstrap 样式之后引入？变量必须在
.breadcrumb规则计算前定义 - 是否误写成
--bs-breadcrumb-dividers（多 s）或--bs-breadcrumb-separator（错词）？官方只认--bs-breadcrumb-divider - 是否在 Shadow DOM 或 iframe 里用面包屑？变量不会自动继承，得在对应作用域内重复声明
复杂点在于：分隔符渲染依赖 .breadcrumb-item:not(:last-child)::after 的 content 计算，而这个规则本身又依赖变量值——任何一环断开，就会回退到默认 /。所以别猜，打开 DevTools 查 computed 面板，看 content 最终值是多少。
