Question

我正在尝试将Bootstrap的导航链接更改为白色，但我不能。这是我的代码。

<nav class="navbar navbar-light" style="background-color: #5E9DFE;">
    <a class="navbar-brand" href="/"><span class="yellow">Div</span><span class="plate">Aid</span> <span class="salmon">T</span><span class="green">asks</span></a>
    <button aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbar" data-toggle="collapse" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar">
        {% if session.user_id %}
             <ul class="navbar-nav mr-auto mt-2" id="add-del">
                 <li class="nav-item"><a class="nav-link" href="/add">Agregar</a></li>
                 <li class="nav-item"><a class="nav-link" href="/delete">Eliminar</a></li>
             </ul>
             <ul class="navbar-nav ml-auto mt-2">
                 <li class="nav-item"><a class="nav-link" href="/logout">Cerrar sesión</a></li>
             </ul>
        {% else %}
             <ul class="navbar-nav mr-auto mt-2" id="log-reg">
                  <li class="nav-item"><a class="nav-link" href="/register">Registro</a></li>
                  <li class="nav-item"><a class="nav-link" href="/login">Iniciar Sesión</a></li>
             </ul>
        {% endif %}
   </div>
</nav>

看到先前的答案和CSS Specificity Documentation后，我尝试更改它：

nav .navbar-nav mr-auto mt-2 .nav-item .navlink{
    color: #ffffff;
}

nav .navbar-nav mr-auto mt-2 .nav-item .navlink:hover{
    color: #e8e8e8;
}

但是仍然缺少一些东西。感谢您的帮助。

Answer 1

.nav-link {
  color: red;
}

.nav-link:hover {
  color: green;
}

<nav class="navbar navbar-light" style="background-color: #5E9DFE;">
  <a class="navbar-brand" href="/"><span class="yellow">Div</span><span class="plate">Aid</span> <span class="salmon">T</span><span class="green">asks</span></a>
  <button aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbar" data-toggle="collapse" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>
  <div class="collapse navbar-collapse" id="navbar">
    {% if session.user_id %}
    <ul class="navbar-nav mr-auto mt-2" id="add-del">
      <li class="nav-item"><a class="nav-link" href="/add">Agregar</a></li>
      <li class="nav-item"><a class="nav-link" href="/delete">Eliminar</a></li>
    </ul>
    <ul class="navbar-nav ml-auto mt-2">
      <li class="nav-item"><a class="nav-link" href="/logout">Cerrar sesión</a></li>
    </ul>
    {% else %}
    <ul class="navbar-nav mr-auto mt-2" id="log-reg">
      <li class="nav-item"><a class="nav-link" href="/register">Registro</a></li>
      <li class="nav-item"><a class="nav-link" href="/login">Iniciar Sesión</a></li>
    </ul>
    {% endif %}
  </div>
</nav>

Answer 2

您的CSS嵌套错误

尝试一下：

nav .navbar-nav.mr-auto.mt-2 .nav-item .nav-link{
    color: #ffffff;
}

如果这不能解决问题，请尝试添加!Important 粉碎预定义的引导程序样式

nav .navbar-nav.mr-auto.mt-2 .nav-item .nav-link{
    color: #ffffff !important;
}

Answer 3

您只需将来自nav-link类的CSS设置为白色

.nav-link {color: white;}

更改Bootstrap导航链接的颜色

3 个答案: