Bootstrap 3：在桌面上將導航欄切換爲導航欄，移動設備上的一行導航欄

Question

我嘗試將桌面上的兩行導航摺疊爲移動設備上的一行導航欄。第一行是頂欄，第二行是主導航欄。我如何隱藏移動設備上的第二個條形碼以實現以下目標：

在此先感謝您的幫助！

桌面

+-------------------------------------------------------------------------------+ 
| 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」之後導航欄導航欄默認在您的第二行的div像這樣：

<!-- 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/

編輯// --------------

這裏是工作的解決方案（去掉 「隱藏-XS」 和編輯CSS）：

@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/