bootstrap面包屑默认分隔符是/，由css伪元素::before通过content属性注入，仅显示在除首项外的每个li前；推荐用css变量--bs-breadcrumb-divider或覆盖::before样式自定义，避免直接修改html。
bootstrap 面包屑分隔符默认是什么
Bootstrap 的 breadcrumb 组件默认使用 / 作为分隔符，但这个符号不是硬编码在 HTML 里的，而是通过 CSS 的 ::before 伪元素 + content 属性注入的。也就是说，你看到的 / 实际上是样式控制的，不是 HTML 结构的一部分。
- 默认分隔符只出现在除第一个
li外的每个li元素前 - 对应的 CSS 规则在 Bootstrap 源码中类似：
.breadcrumb-item + .breadcrumb-item::before - 如果你用的是 Bootstrap 5+，该规则定义在
node_modules/bootstrap/scss/_breadcrumb.scss中
如何自定义分隔符（CSS 方式）
最稳妥、推荐的做法是覆盖默认的 ::before 样式，而不是改 HTML 或 JS：
- 在你的项目 CSS（或 SCSS）里添加如下规则：
.breadcrumb-item + .breadcrumb-item::before { content: "›"; /* 可换成 "»"、"|"、"•"、"→" 等 */ padding: 0 0.5rem; } - 如果要支持 RTL（从右向左）语言，建议加
direction: ltr;避免符号翻转 - 不要用
!important—— 只需确保你的样式表加载在 Bootstrap 之后即可生效 - 注意：如果用了 Bootstrap 的 CSS 自定义属性（如
--bs-breadcrumb-divider），Bootstrap 5.3+ 支持直接设该变量，例如：:root { --bs-breadcrumb-divider: "»"; }
为什么直接在 HTML 里写 > 不推荐
有些开发者会尝试手动在 li 之间插入 > 或 <span class="sep">/</span>，这会导致几个问题：
- 破坏语义结构：面包屑本应是纯
ol > li列表，插入额外元素影响可访问性（屏幕阅读器可能误读） - 响应式失效：Bootstrap 的
.breadcrumb样式依赖于相邻兄弟选择器，手动插入元素会打断.breadcrumb-item + .breadcrumb-item关系 - 重复渲染风险：某些前端框架（如 Vue/React）在列表渲染时若 key 设置不当，可能让分隔符错位或重复
- 不兼容 Bootstrap 的自动「当前页」样式：只有
.breadcrumb-item.active才会被正确识别为终点，手动加的分隔符不属于任何li，无法参与状态管理
Bootstrap 5.3+ 的新方式：用 CSS 变量更干净
如果你用的是 Bootstrap 5.3 或更新版本，可以直接通过 CSS 变量控制，无需重写选择器：
- 支持的变量名是
--bs-breadcrumb-divider - 它接受字符串值（需带引号）、URL（如 SVG 图标）、甚至空格
- 示例（全局修改）：
.breadcrumb { --bs-breadcrumb-divider: "•"; } - 或局部修改（仅某个面包屑）：
<nav aria-label="breadcrumb"><ol class="breadcrumb" style="--bs-breadcrumb-divider: '→';"> ... </ol></nav>
- 注意：变量值必须是合法 CSS 字符串，比如
"|"可以，|（不带引号）会解析失败
分隔符看着小，但改错地方容易让整个面包屑结构松散或语义丢失；优先走 CSS 变量或伪元素覆盖，别碰 HTML 结构本身。
