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：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

根据Bootstrap的Documentation面包屑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：

转到Customizing Bootstrap页面。
转到Breadcrumbs部分。
使用您需要的值（@breadcrumb-active-color）覆盖#000的默认值。
转到“下载”部分，然后按＆＃34;编译并下载＆＃34; 按钮。

方法＃02：

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

.breadcrumb >.active {
   color: black;
}

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

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

＆＃13;

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.breadcrumb > .active,
.breadcrumb > .active a {
  color: black;
}

＆＃13;

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

＆＃13;

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>

以下是从头开始创建CMS模板的基本引导程序框架的实现：Link

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

3 个答案: