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

您需要将 CSS 应用到 .active li 中的 a：

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

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

Answer 2

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：

转到 Customizing Bootstrap 页。
移至 Breadcrumbs 部分。
用您需要的值覆盖 @breadcrumb-active-color 变量的默认值，即 #000。
移至下载部分并按 "Compile and Download" 按钮。

方法#02：

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

.breadcrumb >.active {
   color: black;
}

但是，如果您仍然需要 active 项中的 link，则需要相应地更改选择器，即：

.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>

Answer 3

这应该有帮助：

CSS代码：

.breadcrumb > .active a{
color: #333333; <!-- Or your color preference -->
}

Html代码：

<ol class="breadcrumb">
<li class="active"><a href="#">Active Link</a></li>
</ol>

下面是基本 Bootstrap 框架的实现，用于从头开始创建 CMS 模板：Link

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

Bootstrap: Change breadcrumb's active text color

html

css

breadcrumbs

twitter-bootstrap