更改引导导航文本的颜色 [重复]答案

【问题标题】：Change color of bootstrap nav text [duplicate]更改引导导航文本的颜色 [重复]
【发布时间】：2021-01-09 12:26:22
【问题描述】：

我正在尝试更改引导链接中的文本颜色。我试图在this 帖子中使用相同的方法，但该解决方案不起作用。如何更改文本的颜色？谢谢你。 This是整个代码的codepen。

标记：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <img src="images/DISA.png" height="40">
    <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link">EU34</a></li>
        <li class="nav-item"><a class="nav-link">Support Tracker</a></li>
        <li class="nav-item"><a class="nav-link">Rolling Log</a></li>                
    </ul>
    <img src="images/DISALogoEUROPE.png" style="margin-left: auto; padding-right: 20px;" height="50">
</nav>

CSS：

.navbar.navbar-nav.nav-item li a {
    font-size: 1.5em;
    font-weight: bold;
    color: red;
}

【问题讨论】：

使用!important .. 像这样 .. 也许它会工作.. color: red !important;
你不应该使用!important，因为在这种情况下不需要使用它。

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

试试这个，使用类来覆盖引导类。

.navbar-nav .nav-item .nav-link{
  color:#00cc00
}

Codepen demo

【讨论】：

【解决方案2】：

要更改颜色，请覆盖引导类。

.navbar-dark .navbar-nav .nav-link {
  color: gold;
}

并在悬停或聚焦时更改颜色。

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: red;
}

【讨论】：

【解决方案3】：

您可以在引导程序中使用类，如下所示：

<li class="nav-item"><a class="nav-link text-primary">EU34</a></li>

【讨论】：