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 CSS文件，而是编辑较少的文件，然后将这些文件重新编译为CSS。我无法确定，但你所追求的颜色变量很可能在Variables.less文件中。

使用颜色方案的一种方法是customise你的引导程序下载（链接来自2.3.2版本，Bootstrap 3.0已经出来）

Answer 3

我希望您在项目中包含了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 4

请在ul标记中添加navbar-nav类，这是为了，这样它就不会影响您创建的任何其他样式。

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

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

试试这个：首先在你的链接中添加一个ID元素，如下所示：

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

然后从你的css：

#page-scroll {
    background: #989898;
}

希望有所帮助：）

Answer 6

试试这个

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

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

这对我在Bootstrap v4上起作用

添加了一个类＆＃34; nav-link＆＃34;到每个锚元素：

＆＃13;

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

＆＃13;

使用这样的CSS定位，如上所述，您必须使用！important覆盖默认样式。

＆＃13;

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

＆＃13;

Answer 9

在进行了30分钟的研究后，它非常容易（我很糟糕：$）。

li.'example class'.active {
    CSS
}

所以对你来说最有可能的是：

li.nav-pills.active {

color: #ffffff !important;

background-color: #1bb246;}

如何更改bootstrap scrollspy活动链接颜色

9 个答案: