应优先使用--bs-breadcrumb-divider css变量覆盖，默认值为"/"，需在:root或.breadcrumb上设置带英文双引号的字符串（如"›"），且自定义css必须加载在bootstrap之后。
如何覆盖Bootstrap 4默认的breadcrumb-divider样式
Bootstrap 4用--breadcrumb-divider CSS变量控制分隔符，默认是"/"，但直接改这个变量只能换字符，不能调大小、颜色或间距。真要微调，得绕过变量，用伪元素重写。
常见错误是试图只改content属性却忘了清除原有分隔符——Bootstrap同时用了::before和data-divider属性，两者会叠加显示。
- 优先在
<ol class="breadcrumb"></ol>外层加自定义class（比如breadcrumb-custom），避免全局污染 - 用
.breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before精准定位分隔符伪元素 - 必须显式设
content: ">"（或其他符号），并加margin: 0 0.5rem控距 - 如果原生分隔符还在，检查是否漏写了
.breadcrumb-item:first-child::before { content: none }
为什么font-size调小后分隔符上下偏移
Bootstrap 4里.breadcrumb-item::before默认用vertical-align: middle，但该值对不同字体/符号实际基线不一致，尤其换用"»"或"•"时容易上浮或下沉。
- 把
vertical-align改成text-bottom或baseline，再配合transform: translateY(-1px)微调 - 给伪元素单独设
line-height: 1，避免继承父级行高导致错位 - 别用
padding-top硬顶——会影响整个.breadcrumb-item的点击热区
响应式场景下分隔符被截断怎么办
小屏幕缩放时，若分隔符用了较宽字符（如"→"）或加了letter-spacing，可能溢出容器或触发换行。
- 用
white-space: nowrap锁住单行，但需同步确保父容器有足够宽度或overflow: hidden - 媒体查询中针对
max-width: 768px把分隔符换成更窄的"|"或减小font-size到0.75rem - 慎用
flex-wrap: wrap——面包屑本身是flex布局，分隔符换行会导致结构断裂
用SVG图标当分隔符的兼容性注意点
想用箭头SVG替代文字分隔符？可以，但background-image方案比content: url()更稳。
-
content: url(arrow.svg)在IE11和部分旧版Safari里不渲染，且无法动态变色 - 推荐用
background：设width: 1em; height: 1em; background: url(arrow.svg) center/contain no-repeat - SVG需提前转为单色（删掉
fill属性），靠background-color或filter: invert()统一着色 - 记得给伪元素设
display: inline-block，否则background不生效
最易忽略的是：Bootstrap 4的.breadcrumb-item + .breadcrumb-item选择器权重很高，自定义样式必须带相同或更高权重，比如加.breadcrumb-custom前缀还不够，有时得写成.breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before才能压过源码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
