直接改 --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: "></ol> - 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></style>放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
