Bootstrapでnavの文字色が変更できない

前提

railsで作成中のソフトに、Bootstrapでナビゲーションバー(navbar)を導入しようとしています。

ナビゲーションバーの背景色と文字色を変更しようとしたところ、「背景色とタイトルのみ」変更が反映されてリンクへの反映が行われない状況です。

Bootstrapのバージョンは、４です。

不足情報あれば、教えていただけると幸いです。
お忙しいかとは存じますが、よろしくお願いいたします。

該当のソースコード

<header class="shadow-sm">
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
          <a class="navbar-brand p-3" href="/">Bookers</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                        aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav ml-auto">
            <% if user_signed_in? %>
            <li class="nav-item"><div class="nav-link"><%= link_to current_user do %>
             <i class="fas fa-home"></i>Home<% end %></div>
            </li>
            <li class="nav-item"><div class="nav-link"><%= link_to '/users' do %>
             <i class="fas fa-users"></i>Users<% end %></div>
            </li>
            <li class="nav-item"><div class="nav-link"><%= link_to '/books' do %>
              <i class="fas fa-book-open"></i>Books<% end %></div>
            </li>
            <li class="nav-item"><div class="nav-link"><%= link_to destroy_user_session_path, method: :delete do %>
              <i class="fas fa-sign-out-alt"></i>Log out<% end %></div>
            </li>
            <% else %>
            <li class="nav-item"><div class="nav-link"><%= link_to '/' do %>
             <i class="fas fa-home"></i>Home<% end %></div>
            </li>
            <li class="nav-item"><div class="nav-link"><%= link_to about_path do %>
              <i class="fas fa-link"></i>About<% end %></div>
            </li>
            <li class="nav-item"><div class="nav-link"><%= link_to new_user_registration_path do %>
              <i class="fas fa-user-plus"></i>Sign up<% end %></div>
            </li>
            <li class="nav-item"><div class="nav-link active"><%= link_to new_user_session_path do %>
              <i class="fas fa-sign-in-alt"></i>Log in<% end %></div>
            </li>
            <% end %>
           </ul>
          </div>
        </div>
      </nav>
    </header>

試したこと

SCSSでの文字色の指定。
nav-itemに入れることでアイコン・文字共に変更されると思い入れました。

SCSS
1.nav-item {
2    text-decoration: none;
3    color: white ; 
4}

.text-whiteなどの記載（アイコンのみ変更される。）

<ul> <li> <div>にそれぞれの””に追記した形になります。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2022/07/28 06:39

利用しているBootstrapのバージョンを質問本文に追記してください。４，5では大きくは違わないとは思いますが、念のため。

m.ts10806

2022/07/28 06:41

あと、2点。 ①どこにあるどの指定で変更されると思って対応したのか ②text-whiteはどこにどのように入れたのか

m.ts10806

2022/07/28 06:43 編集

すみません。もう1点。たぶんそのタイトルのアイコン、自分で絵文字入れられてませんか？質問投稿文のタイトル横にある「初心者アイコン」をON（活性化）する対応に切り替えてください。

行動規範の内容に同意します

回答1件

ベストアンサー

Bootstrap4.1.xのソースを確認しますと、以下のように定義されています。

 .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}

nav-link自体に文字色がついています。
CSSは基本は後勝ちなので、中の要素に指定されていればそちらが有効になります。
.nav-itemで一部でも変更されたのは、「元の定義よりも後に書かれたから」です。

例えば、こんなミニマムコードで試してみると影響範囲などが見えてくるはずです。

CSS
1body{
2 color:red
3}
4p{
5 color:blue
6}
7p span{
8 color:yellow
9}

HTML
1<body>
2    aaaa
3    <p>
4    bbbbb<span>cccc</span>dddd
5    </p>
6</body>

質問者さんは上記の例だと
「p spanの色を変更しようとしてp だけに自分で色を指定した」
形となります。

最深部（上記例だとspan）に文字色指定があるのでそちらが反映されるわけです。

ということで、対応策としては主に2点
① .nav-linkを自身で定義し、colorを入れる。（ただ、focusなども含めると同じ .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focusに対して指定した方がいいかも。）
②.text-〇〇は!importantついてるので配下にも影響するはずなので、その色で足りてるならそちらを利用。
③もしくは.nav-linkのところに入れる。<div class="nav-link"> → <div class="nav-link text-white">

②は試してそう？なので（どこに入れたか次第かもしれませんが）
①ですかね。

投稿2022/07/28 07:19

m.ts10806

総合スコア80888