如何让下拉导航栏变黑？

Question

我正在尝试将下拉导航栏设置为黑色，我一直在寻找解决方案2天，但是甚至来自bootstrap文档的模板也无法正常工作，我的意思是下拉框。

以下是导航栏的html代码：

<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand navbar-link"><img src="/images    /logo.png"></a>
        </div>
        <div class="collapse navbar-collapse" id="navcol-1">
            <ul class="nav navbar-nav navbar-right">
                <li role="presentation"><a href="#">Main </a></li>
                <li role="presentation"><a href="#">Main </a></li>
                <li role="presentation"><a href="#">Main </a></li>
                <li role="presentation"><a href="#">Courses </a></li>
                <li role="presentation"><a href="#">Help </a>
                    <a class="visible-sm-block" href="#"> </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

这是页面层次结构：

Answer 1

您正确使用.navbar-inverse，这应该已经让您的导航栏变黑了，可以看到 here 。

有几个原因导致这可能不适合你。

• 您没有正确引用Bootstrap。
  在这种情况下，请检查F12开发人员工具控制台中的错误。
• 您使用的CSS用于不同版本的Bootstrap，而不是您加载的版本。
• 您的代码覆盖了较高的 specificity 的默认值。
• 您已缓存过时的CSS。使用 CTRL + F5 刷新样式表引用，并在单击刷新图标时按住 SHIFT 以确保清除CSS缓存。 / LI>

希望这有帮助！ ：）