如何更改引导滚动间谍活动链接颜色

Question

我正在使用带有 bootstraps nav-pills 导航栏的 scrollspy，并且似乎无法更改活动链接的颜色或悬停颜色。我一直在尝试各种组合，但似乎仍然无法弄清楚为什么我不能改变颜色。任何想法为什么？

CSS

#stickysteps {
    background: #1bb246;
    width:100%;
    position: absolute;
    z-index: 2;
}

#stickysteps h3 {
    color: #454545;
    font-size: 1.6em;
    text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
    -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}

.nav-pills{
    background-color: #1bb246 !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none;
}

.nav-pills li {
    background-color: #1bb246;
    width: auto;
    height: auto;
}

.nav-pills li>a>h3:active {
    color: red !important;
}

.nav-pills > .active > a, 
    .nav-pills > .active > a:hover {
    color: #ffffff !important;
    background-color: #1bb246;
}

导航

<div id="stickysteps">
    <ul class="nav nav-pills">
        <% n = 0 %>
        <% @manual.steps.order(:priority).each do |step| %>
        <li><a href="#step<%= n+1 %>"><h3>Step <%= n + 1 %></h3></a></li>
        <% n += 1 %>
        <% end %>
    </ul>
</div>

Answer 1

这对我有用：
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { color: red !important; background-color: white; }

Answer 2

这在 Bootstrap v4 上对我有用

1. 为每个锚元素添加了一个类“nav-link”：

<div class="collapse navbar-collapse " id="navbarSupportedContent">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link active" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#projects">Projects</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#sharing">Sharing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#contact">Contact</a>
    </li>
  </ul>
</div>

1. 像这样使用 CSS 定位，如上所述，您必须使用 !important 覆盖默认样式。

.nav-link {
  color: white !important;
  text-transform: uppercase;
}
.nav-link.active {
  color: #FFCA47 !important;
}

Answer 3

您不应直接编辑 Bootstrap CSS 文件，而应编辑较少的文件，然后将其重新编译为 CSS。我不记得了，但您所追求的颜色变量很可能在 Variables.less 文件中。

使用配色方案的一种方法是customise您的引导下载（链接来自 2.3.2 版本，引导 3.0 已发布）

Answer 4

我希望您在项目中包含了 Bootstrap JS 文件，其中包括 scrollspy 插件。当前的 jsfiddle 没有帮助，因为没有引用它。

scrollspy 将active 类添加到正在显示其内容的选项卡中，这就是为什么以下应该起作用的原因：

改变

  .nav-pills li>a>h3:active {
    color: red !important;
    }

到

 .nav .nav-pills > .active > a > h3 {
       color: red !important;
     }

改变活动链接的颜色

如文档 http://getbootstrap.com/2.3.2/javascript.html#scrollspy 中所述，插件可以正常工作

导航链接必须具有可解析的 id 目标。例如，<a> href="#home">home</a> 必须对应于 dom 中的某些内容，例如 <div id="home"></div>

.

Answer 5

请在ul标签中添加一个navbar-nav类，这是for，这样就不会影响你创建的任何其他样式。

<ul class="nav nav-pills navbar-nav">
        <% n = 0 %>
        <% @manual.steps.order(:priority).each do |step| %>
       <li><a href="#step<%= n+1 %>"><h3>Step <%= n + 1 %></h3></a></li>
       <% n += 1 %>
       <% end %>
 </ul>

然后只需添加 css 如下：

.navbar-nav> .active > a,
.navbar-nav > .active > a:hover {
      color: #FFF !important;
      background-color: #000!important;
 }

添加您想要的任何 css.. 希望它有效:)

Answer 6

手头的问题并不复杂，只是有点棘手。

试试这个：首先像这样在你的链接中添加一个 ID 元素：

<a href="#step" id="page-scroll">Page</a>

然后从你的 css 中：

#page-scroll {
    background: #989898;
}

希望对你有帮助:)

Answer 7

试试这个

    .navbar-inverse .navbar-nav > .active{
    color: #e6e6e6 !important;
   background: rgba(39, 108, 45, 0.53) !important;
 }
 .navbar-inverse .navbar-nav > .active > a, 
 .navbar-inverse .navbar-nav > .active > a:hover, 
 .navbar-inverse .navbar-nav > .active > a:focus {
      background:rgba(235, 235, 235, 0) !important;
 }

Answer 8

.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
color: #000;
background: #fff;
border-radius: 5px;

}

你也可以改变scrollspy按钮的背景

Answer 9

经过 30 分钟的研究，它超级容易（我很烂：$）。

li.'example class'.active {
    CSS
}

所以对你来说很可能：

li.nav-pills.active {

color: #ffffff !important;

background-color: #1bb246;}