부트 스트랩 및 고정 헤더

Question

고정 된 상단 네비게이션으로 트위터 부트 스트랩을 사용하고 있습니다.

데스크톱에서 정상적으로 작동합니다. 하지만 내 모바일 메뉴는 내가 원하지 않는 콘텐츠를 겹칩니다. 나는 좋은 슬라이딩 규칙 드롭 다운 메뉴를 원한다. 할당 된 클래스를 무시하도록 모바일 장치에 지시하려면 어떻게합니까 navbar-fixed-top? 그 효과를 데스크톱 브라우저에만 적용 해보고 싶습니다.

<div class="container"> 
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <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-brand" href="#"><img src="images/logos/vision-logo.png" class="img-responsive"></a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">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> 
</div>  
</div> 

감사 대신에 "용기"의

Answer 1

사용 "용기 유체"클래스는 현재 부트 스트랩에서 사용할 미디어 쿼리를 사용합니다.

@media(max-width:767px){...} 
@media(min-width:768px){...} 
@media(min-width:992px){...} 
@media(min-width:1200px){...} 

html이 완벽하게 반응합니다.