Question

我是Bootstrap / PHP的新手，所以请保持温和： - ）

代码如下：

<div class = "navbar navbar-inverse navbar-fixed-bottom">
  <div class = "container">
    <p class = "navbar-text pull-left">Copyright 2014 by ABC</p>
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle = "dropdown" style="color: #ffffff;">Support<b class = "caret"></b></a>
        <ul class = "nav navbar-nav navbar-right dropdown-menu">
          <li><a href="#">Help</a></li>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">How To</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

这会在页面底部创建一个带有下拉菜单的导航栏。

导航栏具有反色，因此文本已设置为白色以最大化对比度。

不幸的是，当尝试从菜单中选择时，结果是白色背景上的白色文字。

我的猜测是我需要覆盖Bootstrap的CSS，但我不知道要覆盖什么。

我宁愿不要使用Bootstrap的CSS文件，万一我吹了一切。

非常感谢

Answer 1

您通过添加内联样式style="color: #ffffff;"来覆盖链接颜色。这是一种不好的做法，因为它优先于该元素的所有其他声明（：hover，：active，...）。

如果要更改Bootstrap默认值，最好在单独的CSS文件中进行。在这种情况下，样式将是：

.navbar-inverse .navbar-nav>li>a {
    color: white;
}

您的下拉列表中有额外的课程

<ul class="nav navbar-nav navbar-right dropdown-menu">

应该是

<ul class="dropdown-menu">

您可以看到结果here。

Answer 2

以上的答案，LeBen非常好。但是，在使用Bootstrap时，请注意重写Bootstrap CSS。您可以先在Firebug中轻松播放然后覆盖它，并在其描述中放置一个常用注释，以便您轻松完成。并且，虽然覆盖确保它不会影响项目中的其他部分，所以在覆盖它之前要考虑

Bootstrap 3下拉菜单

2 个答案: