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

Question

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

提前感谢您的帮助!

桌面

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

手机

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

这是我目前拥有的:

Fiddle

Answer 1

如果您想在移动 View 中隐藏第二行，请在第二行 div 的导航栏 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/