부트 스트랩 3 : 바탕 화면의 행이 2 개인 탐색 바를 모바일에 한 행이있는 탐색 모음으로 전환

Question

데스크톱의 2 행 탐색을 모바일의 1 행 헤더로 축소하려고합니다. 첫 번째 행은 상단 바이며, 두 번째 행은 메인 네비게이션입니다. 휴대 기기에서 두 번째 막대를 숨겨서 다음과 같이 표시하려면 어떻게해야합니까?

미리 도움을 청하십시오!

데스크톱

+-------------------------------------------------------------------------------+ 
| BRAND            Call us | Cart | Login | 
|-------------------------------------------------------------------------------| 
|        Link 1 | Link 2 | Link 3 | Link 4 | Link 5 | 
+-------------------------------------------------------------------------------+ 

여기

+-------------------------------------------------------------------------------+ 
| TOGGLE_MAIN       BRAND      TOGGLE_TOP | 
+-------------------------------------------------------------------------------+ 

내가 현재 가지고있는 것입니다 모바일 :

Fiddle

Answer 1

은 모바일보기 추가 기능에서 두 번째 행을 숨기려면 이후에 "hidden-xs" 이 같은 두 번째 행 사업부의 네비게이션 바 네비게이션 바 기본 :

<!-- Second Row --> 
<div class="navbar navbar-default hidden-xs" id="header"> 

<div class="container"> 
<div class="row"> 
<div class="navbar-header"> [...] 

https://jsfiddle.net/bmuma5ow/13/

편집 여기

--------------는 작업 솔루션입니다 // 합니다 (CSS를 "숨겨진-XS"를 제거하고 편집) : 여기

@media (max-width : 767px) { 
    .navbar-brand { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    text-align: center; 
    margin:0 auto; 
    z-index:-1; 
    } 
    .header #toggleTop { 
    float:left; 
    margin-left:15px; 
    } 
    .navbar-default { 
     background-color: #fff; 
     border-width: 0; 
     margin-top: 0px; 
     z-index: 5; 
    } 
    #navbar-collapse2 { 
    margin-top: 50px; 
    } 
} 

봐 : http://jsfiddle.net/bmuma5ow/15/