[英]Changing the color of the links in my bootstrap navbar
我的导航栏有这个代码:
<nav class="navbar 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"><img style ="max-width:100px; margin-top: -7px;" src="images/firma-Edgar-Ayales.png" alt=""></a>
</div><!--End navbar-header-->
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#portfolio">Feedback</a>
<li><a href="#features">Gallery</a>
<li><a href="#gallery">Features</a>
<li><a href="#feedback">Faq</a>
<li><a href="#contact">ContactUs</a>
</ul>
</div>
</div><!-- End container -->
我想改变链接颜色,我在我的CSS中尝试过:
.navbar {
background: rgba(0,0,0,0.4);
font-family: "Raleway";
font-size:10pt;
letter-spacing: 3pt;
color: black;
}
我也尝试过添加!重要但我做不到。
<nav class="navbar 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"><img style ="max-width:100px; margin-top: -7px;" src="images/firma-Edgar-Ayales.png" alt=""></a>
</div><!--End navbar-header-->
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
<ul class="nav navbar-nav" id="links">
<li><a href="#portfolio">Feedback</a>
<li><a href="#features">Gallery</a>
<li><a href="#gallery">Features</a>
<li><a href="#feedback">Faq</a>
<li><a href="#contact">ContactUs</a>
</ul>
</div>
</div><!-- End container -->
CSS:
#links a{
color:#000000;
font-size:18px;
}
我刚刚在ul中添加了id="links"
,然后用CSS引用了它的a
这是一个可能的解决方案“ https://jsfiddle.net/99x50s2s/52/
CSS:
.nav>li>a{
background: rgba(0,0,0,0.4);
font-family: "Raleway";
font-size:10pt;
letter-spacing: 3pt;
color: black;
}
你需要让你的CSS更具体的,通过引导应用的颜色是上a
。 所以最重要的规则是:
.navbar-nav > li >a{
color:black;
}
覆盖boot上bootstrap应用的默认规则:
a {
color: #337ab7;
text-decoration: none;
}
这确保了这种颜色仅应用于作为.navbar-nav
直接后代li的直接后代的.navbar-nav
。 为了全局申请(您的网页中的所有超链接),您也可以通过a{color:black}
覆盖。 您还需要确保在引导程序之后加载css,以便优先于引导程序。 避免使用!important
它会破坏css的任何可级联性,并且会阻止以后的任何重写。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.