부트 스트랩 - 모바일 메뉴를 992px

에 표시합니다. 내 탐색 바는 더 작은 장치에만 모바일 메뉴 만 표시합니다. 뷰포트가 992px보다 작은 경우 표시하도록합니다. 여기 부트 스트랩 - 모바일 메뉴를 992px

내 네비게이션 바의 바이올린입니다 : http://jsfiddle.net/nickmadd/DTcHh/574/

당신은 내가이되고 싶어 방식으로 데스크톱 버전이 반응 할 수없는 사실 때문이 navbars 실제로있다 볼 수 있듯이.

그래서 뷰포트가 992px에 도달하면 어떻게 바로 아래로 크기가 조정될 때처럼 '미니 탐색'을 탭 모바일 버전으로 표시 할 수 있습니까?

<div class="navbar navbar-default nav-links navbar-fixed-top hidden-md hidden-lg"> 
    <div class="container"> 
    <button class="visible-sm visible-xs navbar-toggle" data-target="#i-want-this-to-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
    </button> 
     <a class="mini-navbar navbar-brand" href="/"> 
     <img src="media/img/nav-logo.png" alt="Driven Car Sales Logo" class="img-rounded logo-nav mini-navbar" /> 
     </a> 
    <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> 
     </li> 
     <li><a href="#">How To Find Us</a> 
     </li> 
     <li><a href="#">Contact Us</a> 
     </li> 
    </ul> 
    </div> 
</div>

모든 팁은 많이 주시면 감사하겠습니다 감사 :

여기 내 모바일 네비게이션 바의 HTML입니다!

출처

2014-07-15 Nick M

JS Fiddle Code에 아래 코드를 추가했습니다.

스타일 시트에 몇 줄의 코드 만 추가하면됩니다.

/* Large screens ----------- */ 
@media only screen and (max-width : 992px) { 
    /*body {display: none;}*/ 
    .navbar-nav > li { 
     float: none; 
    } 
    .navbar-nav { 
     float: none; 
    } 
    .nav.navbar-nav { 
     clear: both; 
     float: left; 
     margin: 0 0 0 -15px; 
     width: 100%; 
    } 
}

다른 질문이나 의견이 있으면 JS Fiddle을 수정하고 의견을 작성하십시오. 내가 너를 도울 수 있기를 바란다.

감사합니다. D.

출처

2014-07-15 13:59:20 DevangKantharia

가장 좋은 해결책은 다음과 같습니다. scss _variables_ * @ grid-float-breakpoint *
'$ grid-float-breakpoint : $ screen-md-min! default; –

less를 사용하는 경우 @ grid-float-breakpoint을 사용자 정의하십시오. 그렇지 않은 경우 Customize 페이지를 사용하여 값을 수정하고 사용자 정의 CSS 파일을 생성 할 수 있습니다. 992px 중단 점에서 축소하려면 값을 @ screen-md-min으로 변경하십시오.

사용자 정의 페이지 :

enter image description here

양자 택일로, 당신은 당신의 자신의 미디어 쿼리를 생성 할 수 있습니다.

출처

2014-07-15 13:33:44 jme11

이 기능은 더 적게 사용할 수도 있습니다. 커스텀 페이지보다는 컴파일을위한 소스로 LESS를 사용합니다. – Aibrean

나는 당신의 문제가 올바른 이해한다면, 당신은 부트 스트랩은 화면의 크기가 다른 registeres 때 조정하려는 ...

는 부트 스트랩을 다운로드하는 사용자 정의에서보세요. 아래로 스크롤하면 Media Query Breakpoints (http://getbootstrap.com/customize/#media-queries-breakpoints)를 통해 변수를 볼 수 있습니다.

출처

2014-07-15 13:34:19

부트 스트랩 - 모바일 메뉴를 992px

답변

관련 문제