Bootstrap带箭头面包屑导航样式设置

Bootstrap 5 及 4.6+ 版本支持通过 CSS 变量 --bs-breadcrumb-divider 直接修改面包屑导航的分隔符，比如改成 > 或 。但这有个前提——HTML 结构必须写对，否则变量再漂亮也出不来效果。很多开发者习惯去手动覆盖伪元素，结果发现新版 Bootstrap 已经有了更干净的方案，绕路反而踩坑。下面把正确姿势和常见雷区一次性说清楚。

怎么用 CSS 变量改面包屑分隔符为箭头

Bootstrap 5（以及较新的 Bootstrap 4.6+）原生支持通过 CSS 自定义变量 --bs-breadcrumb-divider 替换默认的 / 分隔符，无需额外写伪元素或覆盖样式。这是最干净、最可维护的方式，没有之一。

• 确保你使用的是 Bootstrap 5 或较新的 Bootstrap 4（如 4.6.2+），旧版（4.0–4.5）不识别该变量。
• 在 外层或面包屑容器上直接添加内联样式：style="--bs-breadcrumb-divider: '>';"。
• 若想全局生效，可在 :root 或 .breadcrumb 中设置，例如：

  :root { --bs-breadcrumb-divider: ""; }

  （注意：值必须是字符串，带英文双引号）。
• 支持任意字符或 Unicode 符号，比如 "→"、""、"╱"。但避免使用未转义的空格或 HTML 实体，直接写字符即可。

为什么不能直接改 .breadcrumb > li + li:before

老项目里，不少开发者习惯去重写 .breadcrumb > li + li:before 的 content 属性。这在 Bootstrap 4 早期确实常见，但现在显然是绕路操作——不仅覆盖成本高，还会和新版本的变量逻辑冲突，破坏语义化的更新机制。

• Bootstrap 5 已将该伪元素逻辑完全移交给 CSS 变量，手动覆盖会导致变量失效。
• 如果同时用了变量和伪元素规则，浏览器按层叠顺序决定谁生效，结果不可控。
• 屏幕阅读器依赖 aria-current="page" 和语义结构，而不是视觉符号，所以改样式不影响可访问性。但乱改结构会带来副作用。

容易踩的坑：结构不对，箭头根本不出现在正确位置

再好看的箭头，也得建立在合法的 HTML 结构上。Bootstrap 面包屑不是随便套个