直接改 --bs-breadcrumb-divider 变量最稳，Bootstrap 5 分隔符逻辑已完全交由该 CSS 变量控制；内联设置需用英文双引号包裹字符串（如 style="--bs-breadcrumb-divider: '>'"），全局推荐在 :root 中定义，且须确保 Bootstrap 版本 ≥ 5.0 并在 Bootstrap CSS 后加载自定义样式。
直接改 --bs-breadcrumb-divider 变量最稳
Bootstrap 5 的分隔符逻辑已完全交给 CSS 自定义变量控制，硬覆盖 .breadcrumb-item + .breadcrumb-item::before 是绕路操作，容易和响应式、RTL、主题切换冲突。只要确保 Bootstrap 版本 ≥ 5.0（或 ≥ 4.6.2），一行变量就能生效。
- 内联设置（单个面包屑）：
<ol class="breadcrumb" style="--bs-breadcrumb-divider: '>'>—— 注意必须是英文双引号包裹的字符串，'>'或>都不行 - 全局设置（推荐）：在项目主 CSS 文件末尾（确保在 Bootstrap CSS 之后加载）写
:root { --bs-breadcrumb-divider: "›"; } - Unicode 箭头要转义，比如 → 写成
"\2192"，» 写成"\00BB"；直接写"→"在部分构建工具里可能被编码破坏 - 别写成
.breadcrumb { --bs-breadcrumb-divider: "•"; }—— 这个变量只在:root或元素自身上声明才被子项继承，类选择器设无效
--bs-breadcrumb-divider 不生效？先查这三件事
常见“改了没反应”，基本不是语法错，而是环境或版本卡点。
- 运行
console.log(bootstrap?.version)或检查引入的 CSS 文件名，确认是 Bootstrap 5.x 或 4.6.2+；4.5 及以下版本根本不识别该变量 - 自定义 CSS 必须在 Bootstrap 的 CSS 之后加载，否则变量被重置；用
<link>顺序或<style>放在</body>前都行，但不能提前 - 值必须是带英文双引号的字符串：
">"✅，'>'❌，>❌，>（HTML 实体）❌
真要用 SVG 或图标字体，别塞进 content
--bs-breadcrumb-divider 接收的是纯字符串，不解析 HTML 或 SVG 标签。想用图标，得走兼容路径。
- SVG 必须转成 data URL：
--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg...%3E");—— 所有/、、<code>space都要 URL 编码，否则解析失败 - Font Awesome 图标需配全属性：
content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900;—— 缺任一字段，显示为方块 - 更稳妥的做法是放弃变量，改用伪元素：
.breadcrumb-item:not(:last-child)::after插入<svg aria-hidden="true">，但必须同步处理vertical-align: middle和line-height: 1，否则小字号下对不齐
移动端隐藏分隔符，别用 display: none
直接干掉伪元素会干扰 flex 布局高度计算，导致文字上下偏移。尤其在 font-size: 0.875rem 下明显。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是在媒体查询里清空内容并归零尺寸：
@media (max-width: 576px) { .breadcrumb-item + .breadcrumb-item::before { content: ""; width: 0; margin: 0; } } - 同时给
.breadcrumb加flex-direction: column; gap: 0.5rem;，让项垂直堆叠，间距可控 - 避免
visibility: hidden—— 它仍占布局空间，可能影响 touch target 区域大小
<nav aria-label="breadcrumb"><ol class="breadcrumb">）、语义正确性（末项用 aria-current="page" 而非 class="active"）、以及变量加载时机 —— 这三处任一出错，箭头再好看也白搭。 
