html - Bootstrap : Change breadcrumb's active text color

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

As per Bootstrap's Documentation breadcrumb's active item doesn't contain any link inside.

这是合乎逻辑的，因为最后一项显示当前事件页面，它不应该是可点击的，所以 <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. 转到 Customizing Bootstrap页面。
2. 转到Breadcrumbs部分。
3. 覆盖 @breadcrumb-active-color 的默认值具有您需要的值的变量，即 #000 .
4. 移动到下载部分并按“编译和下载”按钮。

---

方法#02:

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

.breadcrumb >.active {
   color: black;
}

---

但是，如果您仍然需要内部链接 active您需要相应地更改选择器的元素，即:

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

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.breadcrumb > .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(Without Link)</li>
</ol>
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active"><a href="#">Data(With Link)</a></li>
</ol>