ブートストラップ変更navbar、CSS、HTMLのアクティブボタン

Question

こんにちは、私はhtmlとCSSが初めてです。私はウェブサイトを作成するためにブートストラップを使用しています。私は右のナビゲーションバーのアクティブなボタンの色を変更しようとしています。また、私はいくつかの例を見てきましたが、私はこの例にそれを適用することはできません。前もって感謝します。

HTML：

<div class="Menu"> 
    <nav class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-left" href="http://www.website.com"> <img src="Logo.png" alt="LOGO"> 
     </a> 
     </div> 
     <div id="navbar3" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
    <!--/.container-fluid --> 
    </nav> 
</div> 

CSS：右のブートストラップCSSルール上に、このCSSを試してみてください

navbar-right{ 
    padding-top: 35px; 
} 

img { 
    padding-top: 17px; 
    padding-left: 17px; 
} 

.jumbotron { 
    padding-top: 10px; 
    padding-bottom: 48px; 
    border: 2px solid black; 
} 

.navbar-inverse .navbar-nav > li > a { 
    color: green; 
} 

.navbar3 > .navbar-nav .navbar-right>.active { 
    color:red; 
    background-color:yellow; 

} 
.navbar3 > .navbar-nav .navbar-right>.active > a, 
.navbar3 > .navbar-nav .navbar-right>.active > a:hover, 
.navbar3 > .navbar-nav .navbar-right>.active > a:focus{ 
    color:red; 
    background:blue; 
} 

Answer 1

：ここ

.navbar-inverse .navbar-nav>.active>a{ 
    background-color:red 
} 

.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover{ 
    color:red 
} 

#navbar3 .navbar-nav>.open>a, #navbar3 .navbar-nav>.open>a:focus, #navbar3 .navbar-nav>.open>a:hover{ 
    background-color:red 
} 

が動作しているデモ：https://jsfiddle.net/8ryewrn3/2/

Answer 2

固定それが正常に動作しますとき、あなたはあなたのCSSのいくつかの過ちを持っている：

• あなたは.navbar3を使用していて、それはそれはあなたがあなたも#navbar3
• を使用する必要がありますidあるclassではありませんそう.navbar-nav.navbar-rightない.navbar-nav .navbar-right

.navbar-navと.navbar-rightの間にスペースを持っているが、それはスペースではありませんあなたのCSSは次のようにする必要があります

#navbar3 > .navbar-nav.navbar-right>.active > a, 
#navbar3 > .navbar-nav.navbar-right>.active > a:hover, 
#navbar3 > .navbar-nav.navbar-right>.active > a:focus{ 
    color:red; 
    background:blue; 
} 

これは、あなたがこのようにそれを行う必要がありホバー変更するには、アクティブなボタンに変更されます。ここでは

#navbar3 > .navbar-nav.navbar-right>li>a:hover{ 
    color:yellow; 
} 

をデモを働いている：https://jsfiddle.net/o2dr4w8e/