부트 스트랩 - 내 모바일 토글 버튼이 모든 뷰포트에 나타 납니까?

Question

나는 반응 형 네비게이션을 만드는 방법에 대한 자습서를 보았고, 만들려는 것은 반응하는 메뉴 버튼이다.

http://jsfiddle.net/nickmadd/LvhCh/4/

html로

<nav class="navbar navbar-default affix-top nav-links" data-spy="affix" data-offset-top="100" role="navigation"> 
<div class="container"> 
    <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
    </button> 
    <div class="navbar-header"> <a class="navbar-brand" href="/"><img src="media/img/nav-logo.png" alt="Driven Car Sales Logo" class="img-rounded logo-nav navbar-brand" /></a> 
    </div> 
    <div class="nav-collapse navbar-responsive-collapse" data-toggle="collapse" data-target=".navbar-nav"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Used Cars</a> 

      </li> 
      <li><a href="#">Get Finance</a> 

      </li> 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">About Driven<strong class="caret"></strong></a> 

       <ul class="dropdown-menu"> 
        <li> <a href "#">The Team</a> 

        </li> 
        <li> <a href "#">Our Partners</a> 

        </li> 
       </ul> 
       <!--Drop Down End--> 
      </li> 
      <li><a href="#">How To Find Us</a> 

      </li> 
      <li><a href="#">Contact Us</a> 

      </li> 
     </ul> 
    </div> 
</div> 
</nav> 

는 브라우저에서 열 때

.navbar-toggle { 
display: block; 
} 
.logo-nav { 
height: 2.3em; 
width: auto; 
} 
.brand { 
font-size: 2em; 
margin: 20px 0 25px; 
} 
.navbar-brand { 
opacity: 0; 
color: #ff0066; 
-webkit-transition:opacity 0.3s ease-in; 
-moz-transition:opacity 0.3s ease-in; 
-o-transition:opacity 0.3s ease-in; 
transition: opacity 0.3s ease-in; 
margin-left: 0px; 
} 
.navbar { 
border-radius: 0px; 
border-left: none; 
border-right: none; 
} 
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar- default .navbar-nav>.open>a:focus { 
color: #fff; 
background-color: #DD3B4D; 
} 
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { 
color: #fff; 
} 
.dropdown-menu { 
color: #fff; 
background-color: #DD3B4D; 
} 
.dropdown-menu>li>a { 
color: #fff; 
} 
nav.affix { 
top: 0; 
width: 100%; 
z-index: 1000; 
} 
nav.affix .navbar-brand { 
opacity: 1; 
height: 2.3em; 
width: auto; 
} 
.navbar-header { 
width: 0px; 
-webkit-transition:width .4s ease-in-out; 
-moz-transition:width .4s ease-in-out; 
-o-transition:width .4s ease-in-out; 
transition:width .4s ease-in-out; 
margin: 0 1em 0 1em 
} 
nav.affix .navbar-header { 
width: 8em; 
-webkit-transition: width .4s ease-in-out; 
-moz-transition: width .4s ease-in-out; 
-o-transition: width .4s ease-in-out; 
transition: width .4s ease-in-out; 
margin: 0 1em 0 0; 
} 
.nav-links { 
font: 600 15px/1.5'Arimo'; 
} 
.navbar-nav > li:last-child { 
border-right: 1px solid #475d88; 
} 
ul.nav a:hover { 
color: #fff !important; 
background-color: #DD3B4D !important; 
-webkit-transition: background-color 0.6s ease; 
-moz-transition: background-color 0.6s ease; 
-o-transition: background-color 0.6s ease; 
transition: background-color 0.6s ease; 
} 
nav.affix .navbar-brand { 
display: inline-block; 
} 

이 문제는 그것이된다는 CSS를 : 당신이 여기에서 볼 수 있듯이 나는 버튼을 만들었습니다 여전히 큰 관점에서도 그렇습니다. 모바일 크기로 갈 때 나타나야합니다. 나는 미디어 쿼리로이 일을 할 수 있었지만 부트 스트랩이 당신을 위해이 일을 할 것이라 확신한다.

내가 누락 된 항목이 있습니까?

Answer 1

당신은이 :

".navbar-전환"을 알려줍니다

.navbar-toggle { 
    display: block; 
} 

항상 표시합니다. 이것을 제거하면 올바르게 표시/숨길 것입니다. 또한이 docs은 더 이상 문제가있는 경우 유용 할 수 있습니다. 올바른 구문

업데이트

Updated fiddle. 주된 문제는 .navbar-collapse 대신 .nav-collapse이있는 것이 었습니다.

Answer 2

다른 뷰포트 크기에서 부트 스트랩의 응답성에 큰 부분을 차지하는 숨겨진 클래스가 없습니다.

<button class="navbar-toggle hidden-md hidden-lg" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
</button> 

읽기 크기와 here을 숨기기에 대해 : 당신이 대형 및 중형 뷰포트에 숨겨진 할 때이 bootply

귀하의 버튼을 체크 아웃 잘 작동합니다. 그 클래스를 부트 스트랩의 모든 것에 추가 할 수 있기 때문에 숨길 수 있다면 그 주위를 이동하십시오. 당신이 당신의 CSS의 맨 위에 자신의 CSS로 부트 스트랩 CSS를 재정의 때문입니다