为啥它不在导航栏中显示颜色?
Posted
技术标签:
【中文标题】为啥它不在导航栏中显示颜色?【英文标题】:Why it doesn't shows color in navigation-bar?为什么它不在导航栏中显示颜色? 【发布时间】:2016-10-27 19:06:58 【问题描述】:这是我的代码:
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">Ratnakar Pharma</a>
</div><!--Navbar Header End -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#aboutus">About Us</a></li>
<li><a href="#products">Our Products</a></li>
<li><a href="#contactus">Contact Us</a></li>
</ul>
</div>
</div><!--End Container-->
</nav><!-- End Navbar-->
这是 CSS 代码:
.navbar-inverse
background-color:#2C3E50;
border-color:#FFFFFF;
color:#FFFFFF;
.navbar-inverse .navbar-brand
color:white;
我提供了我的自定义 CSS 代码。并试图改变我的导航栏的背景颜色。但它不起作用。请帮帮我。谢谢。
【问题讨论】:
我也没有发现问题,codepen.io/nagasai/pen/qNRVqb 在 bootstrap 的 css 链接之后添加您的自定义 css 链接。 【参考方案1】:我已经把你的代码改成了这个,它现在可以工作了,背景图片是由引导程序应用的,我删除了
.navbar-inverse
background-color:#2C3E50;
border-color:#FFFFFF;
background-image: none!important;
color:#FFFFFF
【讨论】:
在使用引导程序(或一般情况下)时,使用!important
是个坏主意,因为它不能再次被覆盖。【参考方案2】:
您需要在 Bootstrap css 文件之后加载您的自定义 css 文件。然后就可以了。
https://bootstrapbay.com/blog/customize-bootstrap/
【讨论】:
以上是关于为啥它不在导航栏中显示颜色?的主要内容,如果未能解决你的问题,请参考以下文章