web-dev-qa-db-ja.com

Bootstrapナビゲーションバーのリンクの色を変更する

私はこのトピックが打ちのめされていることを知っていますが、私が読んだことがうまくいきません。 bootstrap navbarのリンクを白に変更しようとしています。フォントサイズは変更できますが、色は変更できないため、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>
htmlcssruby-on-railstwitter-bootstrapbootstrap-4
4
Mason SB

color内のa要素にliを設定します。

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

!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

5
WebDevBooster