应使用 .breadcrumb-item + .breadcrumb-item::before 覆盖 Bootstrap 5 默认分隔符，通过 content 替换为箭头、竖线或图标，并确保样式在 Bootstrap CSS 后加载以保证优先级。
如何用 CSS 覆盖 breadcrumb-item 的默认分隔符
bootstrap 5 默认用 border-right + ::after 伪元素画斜杠分隔符，但实际渲染的是一个 unicode 字符（/），它被插在 .breadcrumb-item + .breadcrumb-item::before 里。直接改 content 最有效。
常见错误是试图修改 .breadcrumb-item 自身的 ::after，其实该伪元素属于后一个 item 的前置样式，得定位到相邻选择器：
- 覆盖必须用
!important，因为 Bootstrap 的 CSS 权重高（如.breadcrumb-item + .breadcrumb-item::before） - 推荐写在自定义 CSS 文件末尾，或用
<style>块内联在<head>后 - 若用 Sass，可重定义
$breadcrumb-divider变量，但需确保在导入 Bootstrap 主文件前赋值
.breadcrumb-item + .breadcrumb-item::before {
content: "›" !important; /* 替换为箭头 */
padding: 0 0.5rem;
}
使用 SVG 或图标字体替换分隔符的注意事项
想用图标（比如 Font Awesome 的 fa-chevron-right 或自定义 SVG）时，不能只靠 content: url(...) —— 它在部分浏览器中不支持 base64 或相对路径，且无法控制尺寸和颜色。
更稳妥的做法是：隐藏原生分隔符，用 ::before 插入 <i> 或 <svg> 元素，并通过 JS 动态注入（适合 SSR 场景）或纯 CSS 控制：
- 先设
.breadcrumb-item + .breadcrumb-item::before { content: none; } - 再给每个
.breadcrumb-item:not(:first-child)添加position: relative，然后用绝对定位塞图标 - 若用
<svg>，建议 inline 写入，避免额外请求；若用 icon font，注意font-size和vertical-align对齐问题
响应式下隐藏分隔符的正确写法
移动端常需要隐藏分隔符、改用垂直堆叠布局。别只用 display: none 简单粗暴地干掉 ::before，否则可能破坏父容器的 flex 行高计算，导致文字错位。
推荐方案是保留伪元素但清空内容并重置间距：
- 在
@media (max-width: 576px)下设content: ""+width: 0+margin: 0 - 同时给
.breadcrumb加flex-direction: column，并用gap: 0.5rem控制项间距 - 避免用
visibility: hidden，它仍占布局空间，影响点击区域
@media (max-width: 576px) {
.breadcrumb-item + .breadcrumb-item::before {
content: "";
width: 0;
margin: 0;
}
.breadcrumb {
flex-direction: column;
gap: 0.5rem;
}
}
为什么修改 $breadcrumb-divider 变量有时不生效
这是 Sass 用户最常踩的坑：变量必须在 @import "bootstrap/scss/functions" 和 @import "bootstrap/scss/variables" 之后、@import "bootstrap/scss/breadcrumb" 之前重定义，且不能放在 @import "bootstrap" 整包之后。
另外要注意：
-
$breadcrumb-divider是字符串，需带引号（如"»"），否则编译报错 - 若项目用 Bootstrap 的 CSS CDN，变量方式完全无效，只能走 CSS 覆盖
- 某些构建工具（如 Vite + sass）会缓存变量，改完要重启 dev server
分隔符看似小，但它牵扯到伪元素、CSS 优先级、Sass 加载顺序和响应式断点三重逻辑，漏掉任意一环都可能白改。
