Bootstrap 5 面包屑导航样式自定义 BreadcrumbItem-Bootstrap教程-PHP中文网

应使用 [aria-current="page"] 选择器定位当前页项并设置字体加粗与颜色，通过 .breadcrumb-item + .breadcrumb-item::before 覆盖分隔符的 content、padding 和 color，优先采用 CSS 变量 --bs-breadcrumb-divider 统一控制，确保无障碍属性 aria-current="page" 不被移除。

bootstrap 5 面包屑导航样式自定义 breadcrumbitem

如何覆盖 Bootstrap 5 的 `BreadcrumbItem` 默认样式

Bootstrap 5 不再提供 BreadcrumbItem 这个独立组件名——它只是语义化 HTML 中的

元素，包裹在和内。想自定义某一项（比如当前页、分隔符或链接态），不能靠“组件 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，否则长文本 + 分隔符会溢出

让当前页文字加粗且无链接的可靠写法

当前页项是

Dashboard

，它本身不是链接，但开发者常误包一层导致语义错误和样式混乱。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

正确做法是：当前页项只保留

，用属性选择器单独控制：

.breadcrumb-item[aria-current="page"] {
  font-weight: 600;
  color: #212529;
}
.breadcrumb-item[aria-current="page"] a {
  pointer-events: none;
  color: inherit;
  text-decoration: none;
}

如果模板中已用，必须加 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），就能全局生效。关键点在于：