Bootstrap 3：将桌面上 2 行的导航栏切换到移动设备上的 1 行导航栏

Question

我尝试将桌面上的两行导航折叠到移动设备上的单行标题。第一行是顶栏，第二行是主导航。如何在移动设备上隐藏第二个栏以实现以下目标：

提前感谢您的帮助！

桌面

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

手机

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

这是我目前拥有的：

Fiddle

Answer 1

如果您想在移动视图中隐藏第二行，请在第二行 div 中的 navbar navbar-default 之后添加“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/

编辑//-------------

这是可行的解决方案（删除了“hidden-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/