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

Question

我尝试将桌面上的 two-row-navigation 折叠为移动设备上的 one-row header。第一行是 top-bar，第二行是 main-navigation。我如何隐藏移动设备上的第二个栏以实现以下目标：

在此先感谢您的帮助！

桌面

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

手机

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

这是我目前拥有的：

Fiddle

Answer 1

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

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

这是有效的解决方案（删除了 "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/

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

Bootstrap 3: switching navbar with 2 rows on desktop to navbar with one row on mobile

css

navbar

twitter-bootstrap-3

responsive