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

Posted 2023-03-06

【中文标题】更改引导导航文本的颜色 [重复]

【英文标题】：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" >
    <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;" >
</nav>

CSS：

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

【问题讨论】：

使用!important .. 像这样 .. 也许它会工作.. color: red !important;

你不应该使用!important，因为在这种情况下不需要使用它。

【参考方案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>