nav-barリンクの色がブートストラップで動作していません

Question

nav-barでリンクの色を変更しようとしていますが、変更後も同じように見えます。なにが問題ですか？なぜ機能しないのですか？ここでは、コードです：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav"> 

    <a class="navbar-brand" href="#page-top"> 
    <span class="d-block d-lg-none">Start Bootstrap</span> 
    <span class="d-none d-lg-block"> 
     <img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="img/profile.jpg" alt=""> 
    </span> 
    </a> 

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav"> 
     <li class="nav-item"> 
     <a class="nav-link" href="#about">About</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#experience">Experience</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#education">Education</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#skills">Skills</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#interests">Interests</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#awards">Awards</a> 
     </li> 
    </ul> 
    </div> 

</nav> 

CSS

.bg-primary { 
    background-color: #BD5D38 !important; 
} 

, 
.nav-link { 
    color: #222222 !important; 
} 

.nav-link:hover, 
.nav-link:focus, 
.nav-link:active { 
    color: #ffffff; 
} 

#sideNav .navbar-nav .nav-item .nav-link { 
    font-weight: 600; 
    text-transform: uppercase; 
} 

@media (min-width: 992px) { 
    #sideNav { 
    text-align: center; 
    position: fixed; 
    top: 0; 
    left: 0; 
    display: flex; 
    flex-direction: column; 
    width: 17rem; 
    height: 100vh; 
    } 
    #sideNav .navbar-brand { 
    display: flex; 
    margin: auto auto 0; 
    padding: 0.5rem; 
    } 
    #sideNav .navbar-brand .img-profile { 
    max-width: 10rem; 
    max-height: 10rem; 
    border: 0.5rem solid rgba(255, 255, 255, 0.2); 
    } 
    #sideNav .navbar-collapse { 
    display: flex; 
    align-items: flex-start; 
    flex-grow: 0; 
    width: 100%; 
    margin-bottom: auto; 
    } 
    #sideNav .navbar-collapse .navbar-nav { 
    flex-direction: column; 
    width: 100%; 
    } 
    #sideNav .navbar-collapse .navbar-nav .nav-item { 
    display: block; 
    } 
    #sideNav .navbar-collapse .navbar-nav .nav-item .nav-link { 
    display: block; 
    } 
} 

私は.navリンククラスにそれを変更したが、それは働いていません。一方、nav-link lassはタグの中にあります。私のサイトでは他のリンクには他の色があり、navリンクにはこの色が必要なので、ホバーとリンクの色を定義するためのタグは使用しません。そのため、私はnav-linkクラスを使用しようとしています。どうすればそれを働かせることができますか？ ありがとうございます！

Answer 1

あなたのCSSで.bg-primaryを閉じた後、不要なカンマがあると思います。私は、コンマは次のコード行をいじっていると思う

.bg-primary { 
    background-color: #BD5D38 !important; } 

：それはする必要がありますので、末尾にカンマを削除

.bg-primary { 
    background-color: #BD5D38 !important; }, 

：今、それは次のようになります。そしてあなたのカラーCSSで重要なのは、ホバー、フォーカス、アクティブな状態が働くのを防ぐことです。ここで

はあなたのCSSの一番上の部分がどのように見えるべきかです：

.bg-primary { 
    background-color: #BD5D38 !important; } 
.nav-link { 
    color: #222222; 
} 
.nav-link:hover, .nav-link:focus, .nav-link:active {color:#ffffff} 

また、あなたは、あなたが具体的かつ.navbar-dark .navbar-navを追加する必要があり、ブートストラップ4の新しいベータ版にリンクされている場合はそれが見えますlike：

.bg-primary { 
    background-color: #BD5D38 !important; 
} 
.navbar-dark .navbar-nav .nav-link { 
    color: #222222; 
} 
.navbar-dark .navbar-nav .nav-link:hover, 
.navbar-dark .navbar-nav .nav-link:focus, 
.navbar-dark .navbar-nav .nav-link:active { 
    color:#ffffff 
}