我正在尝试将下拉式导航栏变黑,我一直在寻找解决方案已有2天了,但是即使引导文档中的模板仍然无法正常工作,我的意思是下拉框。

html - 如何使下拉导航栏变黑?-LMLPHP

这是我的navbar的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>


这是页面层次结构:

html - 如何使下拉导航栏变黑?-LMLPHP

最佳答案

您正确使用的是.navbar-inverse,它应该已经使导航栏变黑了,如here所示。

有几种原因可能对您不起作用。


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


希望这可以帮助! :)

关于html - 如何使下拉导航栏变黑?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47212581/

10-11 20:28