斜杠不显示是因为css伪元素未渲染——需检查.breadcrumb-item + .breadcrumb-item::before是否生效、html结构是否为+、content值是否被覆盖或清空、bootstrap css是否正确加载且版本匹配。
斜杠不显示，基本就是 CSS 伪元素没渲染出来——不是 Bootstrap 坏了，而是生成它的条件没满足。
检查 .breadcrumb-item + .breadcrumb-item::before 是否生效
Bootstrap 4/5 的斜杠完全靠这个选择器注入 content。它只在相邻的两个 .breadcrumb-item 之间生效，首项前面不会加。
- 打开 DevTools → Elements 面板，点开任意一个非首项的
<li class="breadcrumb-item">，看 Styles 面板里是否列出该选择器；如果被划掉，说明被更高优先级样式覆盖 - 确认 HTML 结构是
<ol class="breadcrumb"><li class="breadcrumb-item">...</li></ol>，用<ul></ul>或漏写.breadcrumb-item类都会让选择器完全不匹配 - 检查 computed 样式中
content的最终值：如果是none或空字符串，就坐实是被清空或覆盖了
排查 content 被清空或覆盖的常见位置
很多项目会全局重置伪元素，或者为“统一风格”干掉所有 ::before 的 content。
- 全局搜索项目 CSS 中是否含
::before { content: "" }、.breadcrumb-item::before { content: none }或.breadcrumb-item + .breadcrumb-item::before { content: "" } - 某些 CSS 重置库（如部分变体的
normalize.css）默认设::before, ::after { content: "" }，需手动恢复：.breadcrumb-item + .breadcrumb-item::before { content: "/" } - Bootstrap 3 的原始规则是
content: "/\00a0"（带不间断空格），若被覆盖成content: "/"又没配padding-right，小字号下可能视觉塌陷，看起来像“消失”
确认 Bootstrap CSS 正确加载且版本匹配
斜杠纯靠 CSS，不依赖 JS，但加载失败或混用版本会导致规则根本不存在。
- 打开 Network 面板，确认
bootstrap.min.css返回 200，且文件内容里真有.breadcrumb-item + .breadcrumb-item::before规则 - 别混用 CDN 版本：HTML 写的是 Bootstrap 5 结构（
.breadcrumb-item），但加载的是 Bootstrap 4.6 的 CSS——类名和选择器已不兼容 - 检查是否有同名 class 干扰，比如自定义的
.breadcrumb规则意外覆盖了原生样式作用域
真正卡住人的，往往不是“怎么加斜杠”，而是没意识到它根本不在 HTML 里——你得盯着 DevTools 里那个 ::before 看它到底有没有被计算出来，而不是反复改 HTML 或猜哪个 class 漏写了。
