时间戳

首页 > 解决方案 > 更改 twitter bootstrap 导航栏项目的颜色

html - 更改 twitter bootstrap 导航栏项目的颜色

问题描述

我对网络没有太多经验。首先，我在这里参考了这篇文章，但在我的情况下无法正常工作。如果导航栏更改最后一项颜色

我正在尝试将每个导航栏菜单项的颜色更改为红色，但无法使其正常工作。其次，如果我想为 id="active" 的 href 项设置单独的样式。如何在我的 CSS 中引用该特定项目。请帮忙。

这是我的身体。

<body>
<div class="container mt-3">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">

<a href="" class="navbar-brand">KGS</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#target">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="target">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" id="active" class="nav-link">Home</a>
</li>

<li class="nav-item">
<a href="#" class="nav-link">Our Clients</a>
</li>
   
</ul>
</div>
</nav>
</div>
    
</body>

现在在 default1.css 中，我正在做这样的事情。但是，当我将鼠标悬停在某个项目上时，我可以看到蓝色。同样，我希望每个导航栏项目都是红色的，但我无法让它工作。请帮忙。

.navbar-nav > li > a{
        color:red;
    }
    
        .navbar-nav > li:hover a{
        background: blue;
        border-radius: 7px 7px 0px 0px;
        color: #2056ac;
}

标签： htmlcssbootstrap-4navbar

解决方案

Bootstrap 带有一些预定义的样式，所以为了覆盖它们，一个简单的方法是!important在你的 css 中使用关键字。如果您省略此关键字，由于 Bootstrap 的默认样式，您不太可能会看到颜色发生变化，因此我建议您添加它。

CSS

.nav-link, .navbar-brand{
    color: red!important;
}

#active{
    color: blue!important;
}

见codeply：https ://www.codeply.com/p/pLDEIidtkA

推荐阅读