Bootstrap 更改导航栏链接颜色

Question

我知道这个话题已经被反复讨论过了，但是我所阅读的方法都不起作用。我只是想把Bootstrap导航栏里的链接改成白色。我知道我在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>

- Mason SB

Answer 1

设置 li 元素内部的 a 元素的 color 属性。

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

- ztadic91

---

非常感谢...我没有意识到link_to可以这样用！ - Mason SB

很高兴能够帮助。如果解决了您的问题，请不要忘记将问题标记为已回答。谢谢。 - ztadic91

使用 !important 是一种不好的做法。更多细则稍后提供。 - Ronny Sherer

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 优先级计算器

- WebDevBooster

---

为什么在同一天重复完全相同的答案：https://dev59.com/CKjka4cB1Zd3GeqPGvZM#48730183？ - Temani Afif

也许是因为其他答案不够优秀，而且人们使用不同的关键词组合进行搜索，希望在输入这些关键词组合时能找到正确的答案。 - WebDevBooster