Bootstrap Change Navbar Link Colors [duplicate]

问题:

This question already has an answer here:

• Bootstrap 4 navbar color 5 answers

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>

回答1:

set the color on the a element inside the li.

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

回答2:

The !important flag is meant for quick testing only. Using it as a permanent solution tends to cause problems later and thus should be avoided.

The best practice for overriding css is simply to ensure that the specificity of your custom css rule either matches or exceeds the specificity of the corresponding Bootstrap rule. And of course, the custom css must be loaded after Bootstrap css.

So, in this particular case you could use a rule that looks like this:

.navbar-light .navbar-nav .nav-link {
    color: red;
}

More info about CSS specificity:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

And: CSS Specificity Calculator