"모바일 탐색 바 메뉴에서 부트 스트랩 navbar 드롭 다운을 숨기기"

Question

부트 스트랩을 사용하고 헤더에 언어 선택을 표시하고 있습니다 이제 너비를 줄이면 부트 스트랩이 내 요소를 모바일 선택 항목에 넣을 것입니다. (들. 스크린 샷)

대부분의 경우 좋은 일 이잖아하지만, 어떤 경우에는 내가 옵션은 이동 메뉴의 왼쪽에 표시. 페스트 옵션을 유지하고 싶다.

<div class="navbar-header"> 
.... 
</div> 
<div class="collapse navbar-collapse" id="navbar-main"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
       Deutsch<span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu" role="menu"> 
        <li><a href="foo">French</a></li> 
        <li><a href="foo">English</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

내가 두 개 gr 추천 oups

<ul class="nav navbar-nav navbar-right"> 
    .. Non collapsable items 
    </ul> 
<div class="collapse navbar-collapse" id="navbar-main"> 
    .. collapsable items 
</div> 

는 비 접을 항목은 왼쪽의 메뉴 아래에 배치되지 않는다.

Answer 1

여기 있습니다. 부풀리기 모바일보기에서 일부 메뉴 항목을 제외하려는 것 같습니다. 나는 비슷한 질문을하고 대답했다.

Exclude menu item from the collapse of bootstrap 3 navbar

Answer 2

는 다시 공유 *

다음은 단지 '바닐라 부트 스트랩'NAVBAR 구성 원하는 수의 모든 종류에 대해이 방법을 보여줍니다 예입니다. 여기에는 왼쪽 또는 오른쪽으로 정렬 된 축소 및 축소되지 않는 메뉴 항목과 정적 텍스트가 포함 된 사이트 제목이 포함됩니다. 변경 사항에 대한 더 깊은 이해를 얻으려면 주석을 읽으십시오. 즐겨!

바이올린 : http://jsfiddle.net/nomis/n9KtL/1/

<nav role="navigation" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 

    <!-- Title --> 
    <div class="navbar-header pull-left"> 
     <a href="/" class="navbar-brand">GNOMIS</a> 
    </div> 

    <!-- 'Sticky' (non-collapsing) right-side menu item(s) --> 
    <div class="navbar-header pull-right"> 
     <ul class="nav pull-left"> 
     <!-- This works well for static text, like a username --> 
     <li class="navbar-text pull-left">User Name</li> 
     <!-- Add any additional bootstrap header items. This is a drop-down from an icon --> 
     <li class="dropdown pull-right"> 
      <a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li> 
       <a href="https://stackoverflow.com/users/id" title="Profile">Profile</a> 
      </li> 
      <li> 
       <a href="/logout" title="Logout">Logout </a> 
      </li> 
      </ul> 
     </li> 
     </ul> 

     <!-- Required bootstrap placeholder for the collapsed menu --> 
     <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
    </div> 

    <!-- The Collapsing items   navbar-left or navbar-right --> 
    <div class="collapse navbar-collapse navbar-left"> 
     <!--      pull-right keeps the drop-down in line --> 
     <ul class="nav navbar-nav pull-right"> 
     <li><a href="/news">News</a></li> 
     <li><a href="/Shop">Shop</a></li> 
     </ul> 
    </div> 

    <!-- Additional navbar items --> 
    <div class="collapse navbar-collapse navbar-right"> 
     <!--      pull-right keeps the drop-down in line --> 
     <ul class="nav navbar-nav pull-right"> 
     <li><a href="/locator">Locator</a></li> 
     <li><a href="/extras">Extras</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

• 원래 답 : Exclude menu item from the collapse of bootstrap 3 navbar는 부트 스트랩의 자동 붕괴 기능에서 메뉴 섹션을 제거하기 위해

Answer 3

, 당신은 외부에서 이동해야 . 다음과 같은 내용 :

<div class="navbar-header"> 
    <a class="navbar-brand" href="#">Project name</a> 
    <ul class="nav navbar-nav"> <!-- Items in here won't collapse --> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
       Deutsch<span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="foo">French</a></li> 
       <li><a href="foo">English</a></li> 
      </ul> 
     </li> 
    </ul> 
    </div> 
    <div class="collapse navbar-collapse" id="navbar-main"> <!-- Anything in here will collapse --> 
     <ul class="nav navbar-nav navbar-right"> 
      <a href="#">Link</a> 
      <a href="#">Another Link</a> 
     </ul> 
    </div> 
</div> 

"축소"div 안에있는 항목이 모두 모바일 메뉴로 축소됩니다. 대부분의 메뉴에서 navbar-brand 링크처럼 거기에없는 것들은 그렇지 않습니다.

희망이 있습니다.