모바일 뷰에서 중심 로고가있는 중앙 집중식 부트 스트랩 탐색

Question

두 개의 다른 메뉴가있는 부트 스트랩 탐색 모음이 있습니다. 하나는 가운데에, 하나는 오른쪽에 있습니다. 로고가 왼쪽에 표시됩니다.

모바일보기에서는 두 메뉴가 모두 축소되어 있습니다. 이것이 유일한 방법이며, 나는 원하는대로 데스크탑보기를 작동시킵니다.

하지만 모바일보기에서 정말로 원하는 것은 왼쪽에 축소 버튼, 오른쪽에 로고가 가운데에오고 두 번째 메뉴가있는 것입니다.

달성 할 수있는 좋은 방법이 있습니까?

데스크톱보기 : | 로고 | 메뉴 1 | 메뉴 2 |

모바일보기 : | 메뉴 1 COLAPSE-BUTTON | 로고 | 메뉴 2 | |

<nav class="navbar navbar-default navbar-fixed-top"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse"> 
      <span class="sr-only">Collapse</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="" class="navbar-brand" title=""><img src="LOGO" /></a> 
    </div> 

    <div class="collapse navbar-collapse" id="main-navbar-collapse"> 

     <ul class="nav navbar-nav"> 
      /// MENU 1 - Mobile view collapsed 
     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
      /// MENU 2 - Mobile view right 
     </ul> 
    </div> 

</div> 
</nav> 

Answer 1

당신이 뭔가를 시도 할 수 있지만,이 붕괴 navbar에 영향을 사용자 정의 CSS가 필요합니다 ..

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Logo</a> 
     <a class="navbar-toggle navbar-link pull-left" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </a> 
    </div> 
    <ul class="nav navbar-nav navbar-right pull-right"> 
    <li><a href="#">Menu2</a></li> 
    <li><a href="#">Right</a></li> 
    </ul> 
    <div class="collapse navbar-collapse" id="collapsed-navigation"> 
     <ul class="nav navbar-nav navbar-left"> 
     <li><a href="#">Menu1</a></li> 
     <li><a href="#">Left</a></li> 
     <li><a href="#">Left</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
</nav> 

근무 데모 : http://www.bootply.com/pOdynPWRbt

Answer 2

잘 내가 적절한 방법을 잘 모릅니다하지만 난

는 사업부와 장소를 만드는 작업을해야 솔루션 아래의 생각 : 여기

내 실제 코드 로고 | 메뉴 1 | 그 div에서 그것을 떠내려 가게해라. 대한 미디어 쿼리 지금

모바일 다만 로고 플로트 권리를 확인하고 문제

바탕 화면보기를 해결할 수 : | | 로고 | 메뉴 1 || 메뉴 2 |

모바일보기 : || 메뉴 1 COLAPSE-BUTTON | 로고 || 메뉴 2 |