Question

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

先谢谢你的帮助！

桌面

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

移动

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

以下是我目前所拥有的内容：

Fiddle

Answer 1

如果你想在移动视图中隐藏第二行，请添加＆＃34; hidden-xs＆＃34;在你的第二行div中的navbar navbar-default之后：

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

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

以下是工作解决方案（删除＆＃34; hidden-xs＆＃34;并编辑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 个答案: