navbar, CSS, HTML의 부트 스트랩 변경 활성 버튼

안녕하세요 저는 HTML과 CSS가 처음입니다. 웹 사이트를 만들 때 부트 스트랩을 사용하고 있습니다. 오른쪽 탐색 모음에서 활성 버튼의 색상을 변경하려고합니다. 또한 위에 몇 가지 예제를 보았을 때 텍스트 색상을 변경하고 싶지만이 예제에 적용 할 수 없습니다. 미리 감사드립니다.navbar, CSS, HTML의 부트 스트랩 변경 활성 버튼

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; 
}

출처

2016-08-15 txm101

당신의 뜻을 아마도 여기에서 찾고있는 것을 찾으십시오. http://stackoverflow.com/questions/28712267/how-to-change-the-button-color-when-it-is-active-using-bootstrap – Majd

항상 코드 스 니펫을 사용하거나 작업 코드를 표시하는 JSfiddle. –

앞으로는 감사 할 것입니다. – txm101

: 여기

.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/

출처

2016-08-15 09:28:30

호버 문제를 해결해 주셔서 감사합니다. 스크린 샷을 추가했는데 문제는 활성 버튼의 검은 색이었습니다. – txm101

가 잘 작동 고정 할 때 당신은 당신의 CSS에 일부 잘못이 : 그것이 id 그래서 당신이 사용해야 당신은 .navbar3를 사용하는

을 그리고 그것은 class하지 #navbar3도
을 .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/

출처

2016-08-15 09:39:08

navbar, CSS, HTML의 부트 스트랩 변경 활성 버튼

답변

관련 문제