Bootstrap：更改面包屑的活动文本颜色

Question

我想将面包屑的关于我们的文本颜色设为黑色，但它不起作用。

<ol class="breadcrumb">
    <li class="disabled"><a href="index.html">Home</a></li>
    <li class="active"><a href="#">About us</a></li>
</ol>

我尝试遵循 CSS 但它没有用。

.breadcrumb > .active {
   color: black;
   text-decoration: none;
}

知道为什么它不起作用吗？

Answer 1

根据 Bootstrap 的文档，面包屑的active项目内部不包含任何链接。

这是合乎逻辑的，因为最后一项显示当前活动页面，并且它不应该是可点击的，因此<a>元素在这里过多。

使用面包屑的标准 Bootstrap 结构，即

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

以下是覆盖活动文本颜色的两种可能方法：

方法#01：

1. 转到自定义 Bootstrap页面。
2. 移至面包屑部分。
3. @breadcrumb-active-color用您需要的值覆盖 varaible 的默认值，即#000。
4. 移至下载部分并按“编译并下载”按钮。

方法#02：

您将需要覆盖自定义 css 文件中的 Bootstrap 样式。

.breadcrumb >.active {
   color: black;
}

但是，如果您仍然需要active项目内的链接，您需要相应地更改选择器，即：

.breadcrumb >.active a {
   color: black;
}

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

.breadcrumb >.active {
   color: black;
}