html - 按钮处于事件状态的 Bootstrap Navbar - 我无法清除它

Question

我有这个旧网站 (Bootstrap 3.3.6)，我为客户整理的，我注意到导航栏中的一个按钮被标记为事件按钮，我似乎无法清除它。

它看起来像这样:

Screenshot of issue with buttons

<div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-right">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#registration">REGISTRATION &amp; PROGRAMS</a>
                </li>                                    
                <li>
                    <a class="page-scroll" href="#coaches">OUR COACHES</a>
                </li>
                <li>
                    <a class="page-scroll" href="#contact">CONTACT</a>
                </li>                   
                <li>
                    <a href="https://www.facebook.com/groups/225011327510460/?fref=nf"><img src="img/FB-f-Logo50px.png" alt="Find us on Facebook!"></a>
                </li>
            </ul>
        </div>

当我在事件情况下查看它时，联系按钮显示如下:

<li class="active">
                    <a class="page-scroll" href="#contact">CONTACT</a>
                </li> 

CSS:

a   {
font-family: "HypatiaSansPro-Regular";
color:#CC3333;}

.btn    {
background-color: #CC3333;
outline-color: #CC3333;}

.btn:hover,
.btn:focus,
.btn.active {
background-color: #993333;
outline-color: #CC3333;} 

.contact-section {
padding-top: 100px;
padding-top: 100px;
padding-bottom: 50px;
text-align: center;
background: #eee;}

如果我更改按钮的顺序，对于最后的任何按钮，我都会遇到同样的问题。

这是一个单页 Bootstrap 站点，该页面有 3 个 anchor 。如果有帮助，我可以发送有关该网站的私有(private)消息。

虽然是个小问题，但是有冲突，无法清除，实在是让我很苦恼。有什么反馈吗？

Answer 1

Bootstrap 添加了一个高亮显示事件元素的类:

.navbar-nav>.active>a{
  color: #555;
  background-color: #e7e7e7;
}

您可以通过在 bootstrap 的 css 之后加载的 css 样式表中放置具有您想要的值的相同选择器来覆盖该选择器。

.navbar-nav>.active>a{
  color: #777;
  background-color: transparent;
}

或者，您可以以某种方式删除 .active 类。但我认为 bootstrap 会自动添加它。所以这可能会很麻烦。