Sass CSS - Navbar-linkの色を変更してください

Question

ブートストラップ4のnavbarの色を変更したいのですが、動作しません。理由はわかりません。私は多くのことを試してみましたが、ここでは何も

は彼の小さなCSS

<nav class="navbar navbar-light bg-faded"> 
    <div class="nav navbar-nav"> 
     <a class="nav-item nav-link active" href="#">HearthBreak <span  class="sr-only">(current)</span></a> 
     <a class="nav-item nav-link" href="#">Features</a> 
     <a class="nav-item nav-link" href="#">Pricing</a> 
     <a class="nav-item nav-link" href="#">About</a> 
    </div> 
</nav> 

.navbar{ 
    background-color: #252830; 
    .nav-item, .nav-link{ 
     color: #FFF; 
    } 
} 

通常、私はNavItemを変更することができますが、私は、私は変更する必要のある子を理解していないとnavbarではありません。

Answer 1

ブートストラップの<a>タグのデフォルトの色は青です。を使用して上書きする必要があります。重要。以下のスニペットを追加しました。

.navbar{ 
 
    background-color: #252830; 
 
    
 
} 
 
.nav-item, .nav-link{ 
 
     color: #FFF ! important; 
 
    }

<nav class="navbar navbar-light bg-faded"> 
 
    <div class="nav navbar-nav"> 
 
     <a class="nav-item nav-link active" href="#">HearthBreak <span  class="sr-only">(current)</span></a> 
 
     <a class="nav-item nav-link" href="#">Features</a> 
 
     <a class="nav-item nav-link" href="#">Pricing</a> 
 
     <a class="nav-item nav-link" href="#">About</a> 
 
    </div> 
 
</nav>

Answer 2

あなたはナビゲーションバーの背景色を変更しようとしている場合は、として、「背景画像」プロパティをオーバーライドする必要がある場合があります

nav.navbar{ 
    background-color: red; 
    background-image:none; 
    .nav-item, .nav-link{ 
     color: #FFF; 
    } 
} 

Answer 3

より具体的な追加セレクタのような.navbar.navbar-light.bg-faded（最後の手段として!importantを使用してください）：

以下

.navbar.navbar-light.bg-faded{ 
     background-color: #252830; 
     .nav.navbar-nav>a.nav-item.nav-link { 
      color: #fff; 
     } 
    } 

スニペット：

.navbar.navbar-light.bg-faded { 
 
    background-color: #252830; 
 
} 
 
.nav.navbar-nav>a.nav-item.nav-link { 
 
    color: #fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-light bg-faded"> 
 
    <div class="nav navbar-nav"> 
 
    <a class="nav-item nav-link active" href="#">HearthBreak <span  class="sr-only">(current)</span></a> 
 
    <a class="nav-item nav-link" href="#">Features</a> 
 
    <a class="nav-item nav-link" href="#">Pricing</a> 
 
    <a class="nav-item nav-link" href="#">About</a> 
 
    </div> 
 
</nav>