0

我正在使用带有 bootstraps nav-pills navbar 的 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>
4

9 回答 9

3

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

于 2016-09-12T09:40:35.647 回答
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;
}

于 2018-02-02T00:21:00.027 回答
0

您不应该直接编辑 Bootstrap CSS 文件，而是编辑较少的文件，然后将它们重新编译为 CSS。我无法确定，但您所追求的颜色变量很可能在 Variables.less 文件中。

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

于 2013-08-08T18:53:51.983 回答
0

我希望你已经在你的项目中包含了 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<a> href="#home">home</a>必须对应 dom 中的某些内容，例如 <div id="home"></div>

.

于 2013-08-08T18:56:32.177 回答
0

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

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

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

然后从你的CSS：

#page-scroll {
    background: #989898;
}

希望能帮助到你 ：）

于 2016-06-16T08:26:07.603 回答
0 
.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 上按钮的背景

于 2018-01-05T10:34:42.100 回答
0

尝试这个

    .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;
 }
于 2016-07-21T20:54:41.900 回答
0

请在 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 ..希望它有效:)

于 2015-09-05T16:17:02.867 回答
-1

Its super easy after taking 30 minutes of research (I suck:$).

li.'example class'.active {
    CSS
}

so for you it would have been most likely:

li.nav-pills.active {

color: #ffffff !important;

background-color: #1bb246;}
于 2015-03-25T11:16:21.190 回答