[英]Boostrap NavBar how to change text color on Navbar-Brand class?
我为班级尝试了很多不同的选项来更改navbar
上的文本颜色,特别是navbar-brand
项目。 我的.navbar-brand color:purple;
css 类不起作用。 你能帮我弄清楚我需要把什么作为标签,以便我可以改变颜色吗?
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Nicole Santarsiero</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link" href="./index.html">About </a>
</li>
<li class="nav-item">
<a class="nav-link" href="./portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact.html"> Contact</a>
</li>
</ul>
</div>
</nav>
<style>
.navbar-light {
background-color: gray;
}
.navbar-brand {
color: purple;
}
</style>
了解CSS 特异性。 这告诉浏览器在将样式应用于元素时哪个 CSS 优先。 您需要使用与 Bootstrap 4 .navbar-brand
选择器相同或更具体的 CSS 选择器,它是:
.navbar-light .navbar-brand {
color: rgba(0,0,0,.9);
}
因此,要覆盖它,您将使用:
.navbar-light .navbar-brand {
color: purple;
}
https://www.codeply.com/go/D0dUL1I1rW
普通CSS:
nav a { color: fuchsia; }
nav a .navbar-brand { color: fuchsia; }
or
.navbar-light .navbar-brand {
color: fuchsia;
}
在引导程序 4.5 中为我工作
.navbar-brand{
color: blue !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.