应使用 .breadcrumb-item + .breadcrumb-item::before 覆盖 bootstrap 5 默认分隔符，通过 content 替换为箭头、竖线等符号，并加 !important 确保优先级，且自定义 css 必须在 bootstrap css 之后加载。
如何用 ::before 替换 Bootstrap 面包屑默认分隔符
Bootstrap 5 默认用 / 作分隔符，但它是通过 ::before 伪元素硬编码在 .breadcrumb-item + .breadcrumb-item::before 里的，不能直接改 HTML 或加 class 覆盖。想换图标、箭头或空格，得覆盖这个伪元素。
关键点：Bootstrap 的分隔符样式优先级高，必须用相同选择器强度或更高（比如加上 !important），且要确保 CSS 加载顺序在 Bootstrap 之后。
- 推荐写法：
.breadcrumb-item + .breadcrumb-item::before { content: "›"; /* 换成 ›、→、/、• 等 */ padding: 0 0.5rem; } - 如果用 Font Awesome 图标，需确保字体已加载，并用 Unicode：
.breadcrumb-item + .breadcrumb-item::before { content: "\f054"; /* fa-chevron-right */ font-family: "Font Awesome 6 Free"; font-weight: 600; padding: 0 0.25rem; } - 想移除分隔符？设
content: ""即可，但别漏掉padding，否则相邻文字会挤在一起
为什么 data-bs-separator 属性不起作用？
Bootstrap 5.3+ 确实新增了 data-bs-separator 属性，但它只对 JavaScript 初始化的面包屑生效（比如通过 new bootstrap.Breadcrumb() 创建），而绝大多数项目是纯 HTML 写的静态 <ol class="breadcrumb"></ol> —— 这种情况该属性完全被忽略。
也就是说，如果你没调用 JS 初始化，写 <li class="breadcrumb-item" data-bs-separator="»">Home</li> 是无效的。
- 仅当使用 JS 动态生成时才有效：
const breadcrumb = new bootstrap.Breadcrumb(element, { separator: '»' }); - 静态 HTML 场景下，别依赖这个属性，老实用 CSS 覆盖
::before - 检查控制台是否报错
bootstrap.Breadcrumb is not a constructor，说明 JS 没正确引入，此时data-bs-separator必然失效
响应式场景下分隔符错位或重叠怎么办？
小屏下 .breadcrumb 可能换行，而分隔符仍占固定 padding，导致前后文字贴边甚至重叠。这不是 bug，是 display: flex + white-space: nowrap 组合的副作用。
- 给
.breadcrumb-item加flex-shrink: 0防止文字被压缩 - 把分隔符的
padding改成margin更安全，比如：.breadcrumb-item + .breadcrumb-item::before { content: "•"; margin: 0 0.375rem; } - 超小屏（
xs）可彻底隐藏分隔符：@media (max-width: 576px) { .breadcrumb-item + .breadcrumb-item::before { display: none; } }
自定义分隔符后，无障碍访问还 OK 吗？
纯视觉替换（比如换成箭头图标）本身不影响 screen reader，因为分隔符本就不该被朗读 —— Bootstrap 原生的 / 也是靠 ::before 插入，无语义。但如果你用图片或复杂 SVG，就得额外处理。
- 避免用
<img>或<svg></svg>当分隔符，它们可能被朗读为“image”或触发冗余描述 - 若必须用 SVG，加
aria-hidden="true"和focusable="false" - 不要把分隔符写进文本内容里（例如
<span>Home > About</span>），这会让辅助技术误读为“Home 大于 About”
实际项目里最常踩的坑是：以为改了 HTML 就能换分隔符，结果发现全是 CSS 控制；或者用了 data-bs-separator 却没配 JS 初始化。分隔符看着小，但牵扯渲染逻辑、响应式、无障碍三层，动它之前先 inspect 元素确认真实结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
