Bootstrap 5及4.6+应优先使用--bs-breadcrumb-divider CSS变量修改分隔符，可在或上加内联样式如style="--bs-breadcrumb-divider: '>';"，全局则在:root中定义，需确保Bootstrap版本≥4.6.2且自定义CSS加载在其后。
Bootstrap 5 及 Bootstrap 4.6+ 直接用 --bs-breadcrumb-divider CSS 变量改分隔符，不用动伪元素、不写 ::before、不覆盖选择器——这是唯一推荐路径。
怎么在单个面包屑里临时换成分隔符
适合只改某一处（比如后台管理页统一用 >，但首页例外用 »）：
- 在
或外层上加内联样式：style="--bs-breadcrumb-divider: '>';" - 值必须是带英文双引号的字符串，
'>'、"→"、"\2192"都行，但>（HTML 实体）或没引号的>会失效 - 别写成
data-bs-breadcrumb-divider或其他属性名——它纯属 CSS 变量，只响应style或:root定义
全局统一改分隔符的正确写法
避免每个面包屑都重复写 style，也别污染所有 .breadcrumb 类：
- 在项目主 CSS 文件末尾（确保在 Bootstrap CSS 之后加载）加：
:root { --bs-breadcrumb-divider: "›"; } - 如果只针对深色模式下不同分隔符，可用
@media (prefers-color-scheme: dark)套一层，但注意变量本身不支持媒体查询条件分支，得靠额外类控制 - 不要写成
.breadcrumb { --bs-breadcrumb-divider: "•"; }——这样只对该元素生效，子项继承不到；:root才是可靠作用域
为什么改了变量还是显示 /
常见失败原因不是语法错，而是加载时机或版本不匹配：
- 检查 Bootstrap 版本：运行
console.log(bootstrap?.version)或看引入的 JS/CSS 文件名，--bs-breadcrumb-divider在 Bootstrap 4.6.2+ 和全部 Bootstrap 5.x 中才有效，4.0–4.5 不识别 - 确认自定义 CSS 确实后于
bootstrap.min.css加载——浏览器开发者工具里看 computed 样式，点开--bs-breadcrumb-divider，看来源是否被划掉 - 清空浏览器缓存再试，尤其用了构建工具时，CSS 可能被缓存旧版本
- 别在
标签里写:root却放在开头——它得在 Bootstrap CSS 解析完之后才起效
想用 SVG 图标当分隔符怎么办
CSS 变量只接受字符串，不能直接塞 ，但有替代方案：
- 用 Unicode 箭头字符最稳，如
"\2192"（→）、"\00BB"（»），它们随字体缩放，无障碍友好 - 真要 SVG，得放弃变量，改用覆盖伪元素方式：先清空默认
.breadcrumb-item::before { content: none !important; }，再给.breadcrumb-item:not(:last-child)::after插入 SVG data URL（需转义）或 base64，但会增加维护成本和可访问性风险 - 若用 Bootstrap Icons 的
，必须加aria-hidden="true"，否则读屏器可能念出 “chevron right”
最容易被忽略的是版本验证和加载顺序——很多人卡在“写了却没变”，其实只是 bootstrap.min.css 比自定义 CSS 多加载了一次，或者用着 4.5.3 还在查 5.x 文档。
