Question

我一直在Bootstrap中重建我的网站，以便在我自己设计更强大的东西时快速获得原型。在覆盖默认样式时，它的价值已经超出了它的价值。

如果您需要它以供参考，网站为here。

我试图获得＆＃34; Home＆＃34;的背景颜色。链接是白色的。我成功地设计了其他navbar链接。

以下是我用来定位的CSS类型的示例（我不认为这里有问题）：

.white-back, #home {
    background-color: white;
}

HTML：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active" id="home"><a href="http://kennethfrancis.com">Home</a></li>
      </ul>
    </div>
  </div>
</nav>

我已尝试在li.active以及包含的a上添加ID。当我将li.active > a的背景颜色设置为白色时，它无法正常工作。我甚至试过使用!important。我有什么东西在这里失踪吗？我根据Firebug检查员说的对象是什么来攻击几种不同的方式。

现在，看着这一切，其他一切都被剥夺了它让我感觉好像我已经嵌套疯狂了。我可以剥离任何这些并保持页面的结构吗？

如果有人能够在任何关于如何克服这种元素定位/覆盖问题的链接中投入，那将会很棒。任何相关的东西。

Answer 1

如果您正在使用课程，那么您需要确保您的CSS更具体，以便应用。所以li.active a不会被默认的Bootstrap类覆盖，因为它比你的样式更具体。

您需要像下面的代码一样定位才能正常工作

.navbar-default .navbar-nav>.active>a {
  background: #fff;
}

如果您使用#home作为li，则可以使用

#home a {
  background: #fff;
}

希望这有帮助

Answer 2

我已经在你的style.css中下载了你的页面......只需放置这个类：

.navbar-default.navbar-fixed-top .nav > li.active > a {
    background: white !important; 
}

如何克服Bootstrap的默认样式？元素定位问题？

2 个答案: