推荐使用 --bs-breadcrumb-divider 变量修改分隔符，需 bootstrap 4.6.2+/5.x 版本且 css 加载顺序正确；支持任意字符或空字符串，兼顾可访问性与响应式安全。
用 --bs-breadcrumb-divider 变量改分隔符（Bootstrap 5 / 4.6.2+）
这是唯一推荐路径，不碰伪元素、不写 !important、不影响可访问性。变量生效前提是版本够新且 CSS 加载顺序正确。
- 在面包屑容器上加内联样式：
<ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';"></ol>—— 注意英文双引号必须包裹符号，>单独写会被 HTML 解析器吞掉 - 全局统一改：在项目主 CSS 文件末尾（确保在
bootstrap.min.css之后）写:root { --bs-breadcrumb-divider: "›"; } - 支持任意字符或空字符串：
style="--bs-breadcrumb-divider: '';"可彻底隐藏分隔符，比display: none更安全 - 常见失败原因：控制台查
bootstrap?.version确认 ≥4.6.2 或 5.x；开发者工具里看 computed 样式中该变量是否被划掉（说明加载太早或被覆盖）
为什么直接改 .breadcrumb-item + .breadcrumb-item::before 容易失效
这不是“不能用”，而是容易踩权重、版本、结构三重坑。Bootstrap 5 的分隔逻辑已移交变量控制，硬覆盖伪元素反而可能让变量失效。
- 旧写法如
.breadcrumb-item + .breadcrumb-item::before { content: "›" !important; }在 Bootstrap 5 下仍能显示，但若同时设--bs-breadcrumb-divider，浏览器按层叠规则决定谁赢，结果不可控 - 选择器依赖
<ol></ol>结构 —— 若误用<ul></ul>或<div>，<code>+ .breadcrumb-item根本不匹配，伪元素压根不渲染 - 移动端响应式时，
display: none掉伪元素可能导致 flex 行高计算异常，文字错位；而变量设为空字符串则无此风险 - 稳妥做法：先清空原生分隔符：
.breadcrumb-item + .breadcrumb-item::before { content: none; }，再给非首项加::after插入 inline SVG - SVG 必须 inline 写入（避免额外请求），并显式设
width/height和vertical-align: middle对齐文字基线 - 若用 icon font（如
<i class="fa fa-chevron-right"></i>），需确保父级.breadcrumb-item有font-size且line-height: 1，否则图标上下飘移 - 注意：屏幕阅读器不会读 SVG 或 icon font，所以语义仍靠
aria-current="page"保障，不是靠视觉符号 - 正确做法：媒体查询内设
.breadcrumb-item + .breadcrumb-item::before { content: ""; width: 0; margin: 0; }—— 保留伪元素占位，清空内容 - 同步调整容器：
@media (max-width: 576px) { .breadcrumb { flex-direction: column; gap: 0.5rem; } } - 避免用
visibility: hidden—— 它仍占布局空间，可能影响点击热区或导致相邻元素间距异常 - 验证方式：用 Chrome 开发者工具开启“无障碍”面板，检查分隔符节点是否仍存在且未被跳过
用 SVG 或图标字体替换分隔符的实操要点
想用 <svg></svg> 或 Font Awesome 图标？别依赖 content: url() —— 它在 Safari 和部分构建环境下对 base64 支持差，且无法调色、缩放。
响应式下隐藏分隔符却保持语义的写法
小屏时堆叠布局不需要斜杠，但删 DOM 或设 display: none 会破坏屏幕阅读器导航流。
<nav aria-label="breadcrumb"></nav> 或当前页没写 aria-current="page"，对屏幕阅读器来说，这串路径就只是几个孤立链接，而非可导航的层级路径。
