Bootstrap 更改导航栏链接颜色 [英] Bootstrap Change Navbar Link Colors

问题描述

我知道这个话题已经被打死了，但我所读的内容不起作用.我只是想将引导程序导航栏中的链接更改为白色.我知道我有 CSS，因为我可以更改字体大小，但不能更改颜色.

nav .navbar-nav li{颜色:白色！重要；字体大小:25px；}<nav class="navbar navbar-expand-lg navbar-light fixed-top sticky-top"><%= link_to root_path, class: 'navbar-brand' do %><span class="fa fa-home" aria-hidden="true">Bartlett Containers LLC</span><%结束%><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle导航"><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse" id="navbarResponsive"><ul class="navbar-nav"><li class="nav-item"><%=link_to '定价'，定价路径，类:'导航链接' %><li class="nav-item"><%=link_to 'FAQ', faq_path, class: 'nav-link' %><li class="nav-item"><%=link_to 'Contact', contact_path, class: 'nav-link' %>

</nav>

解决方案

在 li 内的 a 元素上设置 color.

nav .navbar-nav li a{颜色:白色！重要；}

I know this topic has been beaten to death, but what I have read isn't working. I'm simply trying to change the links in my bootstrap navbar to the color white. I know I have the CSS on it because I can change the font-size, but not the color.

nav .navbar-nav li{
  color: white !important;
  font-size: 25px;
  }

<nav class="navbar navbar-expand-lg navbar-light fixed-top sticky-top">
  <%= link_to root_path, class: 'navbar-brand' do %>
            <span class="fa fa-home" aria-hidden="true"> Bartlett Containers LLC</span>  <% end %>


  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav">
      <li class="nav-item">
        <%=link_to 'Pricing', pricing_path, class: 'nav-link' %>
      </li>
      <li class="nav-item">
        <%=link_to 'FAQ', faq_path, class: 'nav-link' %>
      </li>
      <li class="nav-item">
        <%=link_to 'Contact', contact_path, class: 'nav-link' %> 
      </li>

    </ul>
  </div>
</nav>

解决方案

set the color on the a element inside the li.

nav .navbar-nav li a{
  color: white !important;
  }

这篇关于Bootstrap 更改导航栏链接颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！