Bootstrap 5 面包屑分隔符应优先通过 CSS 变量 --bs-breadcrumb-divider 修改，如 style="--bs-breadcrumb-divider: '>';" 或 :root { --bs-breadcrumb-divider: "›"; }，值须为英文双引号包裹的字符串；旧版（

Bootstrap 5 的面包屑（breadcrumb）样式修改，**优先用 CSS 自定义变量，别碰伪元素或结构**——这是最稳、最可持续的方式。旧式覆盖 .breadcrumb-item + .breadcrumb-item::before 在 v5 中属于“带伤操作”，容易在响应式断点、RTL 布局或未来升级中失效。

怎么改分隔符为箭头（如 > 或 ›）

Bootstrap 5 把分隔符完全交给 CSS 变量 --bs-breadcrumb-divider 控制，不是写死在 HTML 或伪元素里。

• 内联设置（单页生效）：
  ，注意必须是英文双引号包裹的字符串
• 支持 Unicode：想用 →？写成 "\2192"（双反斜杠），直接写 → 在部分字体下可能显示为方块
• 别写 > 这类 HTML 实体——CSS 不解析它，会原样输出字符 >，而不是 > 符号

为什么加了 active 类当前项却不高亮

这不是样式问题，而是结构语义错误。Bootstrap 5 的高亮逻辑依赖 aria-current="page"，而非 class="active"（后者在 v5 中已不参与样式计算）。

• 末项必须是
• 当前页
，不能带 @#@#@#@#@#@#@#@#@#@0
• 容器必须是
  ，不是
  或
  ；外层必须有
• 如果用了自定义主题或重置 CSS，检查 --bs-breadcrumb-active-color 是否被意外覆盖

用伪元素手动覆盖 ::before 会出什么问题

能临时生效，但代价高：破坏变量机制、干扰 RTL、响应式换行错位、与屏幕阅读器协作异常。


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• Bootstrap 5 已移除对 .breadcrumb-item + .breadcrumb-item::before 的样式绑定逻辑，变量才是唯一权威来源
• 手动写 .breadcrumb-item + .breadcrumb-item::before { content: ">" } 时，若未加 !important，大概率被后续加载的 Bootstrap CSS 覆盖（尤其使用 CDN 时）
• 伪元素默认按 baseline 对齐，在小字号（如 0.75rem）下，> 会明显高于文字，需额外加 vertical-align: middle 和 line-height 修复
• 在 RTL 页面中，::before 插入位置仍为“左侧”，导致箭头方向反向；而变量驱动的分隔符会随文本流自动翻转

自定义颜色/间距该动哪些变量

所有视觉表现都由一组 CSS 变量控制，改它们比写一堆选择器更干净、更易维护。

• 文字色：--bs-breadcrumb-color（非当前项）
• 当前项色：--bs-breadcrumb-active-color（影响 aria-current="page" 项）
• 分隔符色：--bs-breadcrumb-divider-color
• 垂直间距：--bs-breadcrumb-padding-y（控制上下内边距）
• 项间水平间距：--bs-breadcrumb-item-padding-x（影响分隔符左右留白）
• 若用 Sass 构建项目，直接在 _variables.scss 里重定义这些值，编译后自动注入，无需 runtime CSS 注入

真正容易被忽略的点是：**变量只在 Bootstrap 5 及 4.6.2+ 生效，老项目若混用 4.5 或更低版本，--bs-* 会被浏览器直接忽略**。上线前务必用开发者工具检查 computed styles 中该变量是否被识别——没生效，就说明版本不对，得切回伪元素方案，但要同步清理所有冲突规则。