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

弗朗西斯

我一直在Bootstrap中重建我的网站,以便在我自己设计一些更坚固的东西时获得快速的原型。在覆盖默认样式方面,事实证明,这比值得的事还要麻烦。

如果您需要参考该网站,请访问这里

我正在尝试将“主页”链接的背景颜色设置为白色。我已经成功设计了其他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>

我试过在包含的IDli.active上加上ID a当我将的背景颜色设置li.active > a为白色时,它不起作用我什至尝试使用!important这里有我想念的东西吗?我根据Firebug检查员所说的对象攻击了几种不同的方式。

现在,看着它周围的所有其他东西都被剥夺,让我感到好像我已经疯狂地嵌套了div。我可以删除其中的任何内容并维护页面的结构吗?

如果任何人都可以抛开任何有关如何克服此类元素定位/覆盖问题的链接,那也将非常好。任何相关的。

前卫的

如果使用的是类,则需要确保CSS更具体地适用。因此,li.active a由于它比您的样式更具体,因此将无法使用,因为默认情况下它会被Bootstrap类覆盖。

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

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

如果您将ID#home用作li,则可以使用

#home a {
  background: #fff;
}

希望这可以帮助

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章