我正在尝试将下拉式导航栏变黑,我一直在寻找解决方案已有2天了,但是即使引导文档中的模板仍然无法正常工作,我的意思是下拉框。
这是我的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>
这是页面层次结构:
最佳答案
您正确使用的是.navbar-inverse
,它应该已经使导航栏变黑了,如here所示。
有几种原因可能对您不起作用。
您没有正确引用Bootstrap。在这种情况下,请检查F12开发人员工具控制台中的错误。
您将CSS用于不同于所加载版本的Bootstrap版本。
您有用更高的specificity覆盖默认值的代码。
您已经缓存了过时的CSS。使用CTRL + F5刷新样式表刷新,并在单击刷新图标时按住SHIFT,以确保也清除CSS缓存。
希望这可以帮助! :)
关于html - 如何使下拉导航栏变黑?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47212581/