应覆盖.breadcrumb-item + .breadcrumb-item::before样式，用content替换为"›"等字符串，并添加padding: 0 0.5rem; vertical-align: middle;确保对齐与可访问性。
如何用 ::before 或 ::after 替换 .breadcrumb-item + .breadcrumb-item 的默认斜杠
Bootstrap 默认用 / 作为面包屑分隔符，但它是通过 CSS ::before 伪元素硬编码进 .breadcrumb-item + .breadcrumb-item 的。直接改 HTML 里加符号反而会破坏语义和可访问性，正确做法是覆盖原生样式。
关键点在于：Bootstrap 5+ 的分隔符由 .breadcrumb-item + .breadcrumb-item::before 控制，且默认设置了 content: "/"。你只需重写这个规则即可。
- 必须用相同或更高优先级的选择器（推荐加
!important或提升 specificity，比如加.breadcrumb前缀） - 确保新
content值是字符串（如"›"、"→"、"•"），不能是空格或纯空白符（否则可能渲染异常） - 如果要用图标字体（如 Font Awesome），需配合
font-family和 Unicode 字符，例如content: "\f054";
为什么直接修改 content 后分隔符不显示或错位
常见现象是新符号没出来、位置偏移、或者和文字重叠——这通常不是代码写错了，而是样式继承或盒模型干扰导致的。
-
display必须为inline或inline-block（伪元素默认是inline，但若父元素设了display: flex，它仍会参与布局） - Bootstrap 的
.breadcrumb-item默认有padding-left: 0.5rem，而伪元素没有 margin，容易紧贴前一项文字；建议统一加margin: 0 0.5rem - 若用了 SVG 或自定义字体图标，要确认
font-size和line-height与文本一致，否则上下对不齐
兼容 Bootstrap 4 和 Bootstrap 5 的写法差异
Bootstrap 4 把分隔符写在 .breadcrumb-item + .breadcrumb-item::before；Bootstrap 5 改成了 .breadcrumb-item + .breadcrumb-item::before，表面一样，但实际多了 text-decoration: none 和更严格的垂直居中逻辑。
立即学习“前端免费学习笔记（深入）”；
- BS4 可直接覆盖：
.breadcrumb-item + .breadcrumb-item::before { content: "›"; padding: 0 0.5rem; } - BS5 建议补全重置项，避免继承干扰：
.breadcrumb-item + .breadcrumb-item::before { content: "›"; padding: 0 0.5rem; text-decoration: none; vertical-align: middle; } - 若项目同时支持两个版本，可用
.breadcrumb做统一前缀提高 specificity：.breadcrumb .breadcrumb-item + .breadcrumb-item::before
用 SVG 图标替代文字分隔符的注意事项
用 background-image 或内联 SVG 当分隔符，比 Unicode 更可控，但要注意尺寸和响应式表现。
- 不要把 SVG 写进
content（CSS 不支持）；应改用background+width/height+display: inline-block - 推荐方案：保留
::before，但用background: url("data:image/svg+xml,...")，并设置width: 1em; height: 1em; - 务必加
vertical-align: middle，否则 SVG 容易下沉；margin也要手动调，不能依赖默认间距
.breadcrumb-item，所以别删掉语义结构去硬塞符号，也别用纯图片替代文字分隔符而不加 aria-hidden="true"。 
