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

【问题标题】：Bootstrap: Change breadcrumb's active text colorBootstrap：更改面包屑活动文本颜色
【发布时间】：2017-01-25 08:16:04
【问题描述】：

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

<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;
}

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

【问题讨论】：

标签： html css twitter-bootstrap breadcrumbs

【解决方案1】：

根据 Bootstrap 的 Documentation 面包屑的 active 项目里面不包含任何链接。

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

对面包屑使用标准引导结构，即

<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。
移动到下载部分并按“编译和下载”按钮。

方法#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>

【讨论】：

【解决方案2】：

您需要将 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>

【讨论】：

【解决方案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>

这是一个从头开始创建 CMS 模板的基本引导框架的实现：Link

【讨论】：