应使用 [aria-current="page"] 选择器定位当前页项并设置字体加粗与颜色，通过 .breadcrumb-item + .breadcrumb-item::before 覆盖分隔符的 content、padding 和 color，优先采用 CSS 变量 --bs-breadcrumb-divider 统一控制，确保无障碍属性 aria-current="page" 不被移除。
如何覆盖 Bootstrap 5 的 BreadcrumbItem 默认样式
Bootstrap 5 不再提供 BreadcrumbItem 这个独立组件名——它只是语义化 HTML 中的 <li> 元素，包裹在 <nav aria-label="breadcrumb"></nav> 和 <ol class="breadcrumb"></ol> 内。想自定义某一项（比如当前页、分隔符或链接态），不能靠“组件 props”，得从 CSS 层级和选择器入手。
常见错误是直接写 .breadcrumb-item a { color: #333; }，结果发现当前项（aria-current="page"）没生效，或者分隔符（::before）颜色错乱。
- 必须用
[aria-current="page"]选择器定位当前项，而不是类名（Bootstrap 5 已弃用.active类） - 分隔符由
.breadcrumb-item + .breadcrumb-item::before生成，修改时需同时重置content、color和padding - 如果用了 Sass，优先在
$breadcrumb-divider变量处统一改，避免后期维护冲突
修改分隔符为斜杠 / 或箭头 → 的实操方式
默认分隔符是反斜杠 \（Unicode \002F），但多数项目需要正斜杠 / 或 SVG 箭头。直接覆盖伪元素最稳妥：
.breadcrumb-item + .breadcrumb-item::before {
content: "/"; /* 或 "→" */
padding: 0 0.5rem;
color: #6c757d;
}注意：如果只改 content 不重置 padding，间距会异常；若用 SVG，建议内联 base64 或用 background-image 避免额外请求。
- 不要用
.breadcrumb-divider类——Bootstrap 5 已移除该辅助类 - 若需响应式分隔符（如移动端隐藏），可用
@media (max-width: 576px)套住整个::before规则 - 确保父容器
.breadcrumb没有white-space: nowrap，否则长文本 + 分隔符会溢出
让当前页文字加粗且无链接的可靠写法
当前页项是 <li class="breadcrumb-item" aria-current="page">Dashboard</li>，它本身不是链接，但开发者常误包一层 <a></a> 导致语义错误和样式混乱。
正确做法是：当前页项只保留 <li>，用属性选择器单独控制：
.breadcrumb-item[aria-current="page"] {
font-weight: 600;
color: #212529;
}
.breadcrumb-item[aria-current="page"] a {
pointer-events: none;
color: inherit;
text-decoration: none;
}- 如果模板中已用
<a href="#" aria-current="page"></a>，必须加pointer-events: none阻止点击，否则焦点/键盘导航会卡住 - 别用
!important强制覆盖，优先提高选择器权重，例如加.breadcrumb .breadcrumb-item[aria-current="page"] - 无障碍要求：当前页项必须保留
aria-current="page"，不可删掉或改成role="text"
Sass 用户如何安全地定制所有面包屑变量
Bootstrap 5 提供了完整的一套面包屑 Sass 变量，改它们比手写 CSS 更干净，也兼容未来升级：
$breadcrumb-font-size: 0.875rem;
$breadcrumb-padding-y: 0;
$breadcrumb-padding-x: 0;
$breadcrumb-item-padding-x: 0.5rem;
$breadcrumb-margin-bottom: 1rem;
$breadcrumb-bg: transparent;
$breadcrumb-divider-color: #6c757d;
$breadcrumb-active-color: #212529;
$breadcrumb-divider: quote("/");把这些变量放在引入 Bootstrap 主 SCSS 文件之前（如 _custom.scss），就能全局生效。关键点在于：
-
$breadcrumb-divider必须用quote()包裹字符串，否则编译报错 -
$breadcrumb-bg设为transparent后，记得检查父容器背景是否影响可读性 - 如果项目用了 CSS-in-JS（如 Emotion），这些变量不生效，只能走 CSS 覆盖方案
最易被忽略的是 aria-current 的语义一致性——样式可以千变万化，但这个属性一旦漏掉或写错，屏幕阅读器就无法告知用户“你已在当前页面”。
