Bootstrap更改导航栏链接颜色[重复]

Question

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

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>

Answer 1

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

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

Answer 2

!important 标志仅用于快速测试。将其用作永久解决方案往往会在以后引起问题，因此应避免。

覆盖 css 的最佳做法是确保自定义 css 规则的特异性匹配或超过相应 Bootstrap 规则的特异性。当然，自定义 css 必须在 Bootstrap css 之后加载。

因此，在这种特殊情况下，您可以使用如下所示的规则：

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

更多关于 CSS 特性的信息：

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

还有：CSS Specificity Calculator