Bootstrap Multi導航欄

Question

我必須在Bootstrap中建立一個響應式雙頭欄頭 - 基本上我有兩個導航欄 - 如下 - 第一個導航欄是一個子導航欄，但由於其設計在導航導航欄上方的小型設計中 - 我的問題是，我希望兩者都崩潰並打開移動按鈕 - 但我需要命令被顛倒 - 以便主導航（第二個列表 - 以家開始）最先 - 這可能是簡單的 - 還是需要一個jQuery腳本？

<nav class="navbar navbar-inverse navbar-fixed-top navbar-expanded"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBr"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand page-scroll" href="#page-top"> 
       <img src="assets/img/logo.png" class="img-responsive" alt="Motor Depot Logo"> 
      </a> 
     </div> 
     <!-- Nav Bar One--> 
      <div class="collapse navbar-collapse" id="nav"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="hidden"> 
        <a class="page-scroll" href="#page-top"></a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#about">About</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#careers">Careers</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#news">News</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#contact">Contact</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#chat">Live Chat</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#phone">Phone</a> 
       </li> 
      </ul> 
      </div> 
     <!-- Nav Bar Two--> 
      <div class="collapse navbar-collapse" id="navBr"> 
      <ul class="nav navbar-nav navbar-right"> 

       <li> 
        <a class="page-scroll" href="#home">Home</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#showrooms">Showrooms</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#search">Search</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#serviceMot">Service &amp; MOT</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#smartDrive">SmartDrive</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#value">Value Your Car</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#contact">Offers</a> 
       </li> 
      </ul> 
      </div> 


     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

Answer 1

兩個你.nav元素添加到您希望在未摺疊菜單他們出現的順序摺疊菜單元素。

然後使用show.bs.collpase事件的可摺疊菜單display屬性更改爲flex並使用第一.nav元素的order屬性來第二.nav元素之後。

下面是一個例子，你一定會明白。

$('#navBr').on('show.bs.collapse', function() { 
 
    $(this).css({ 
 
    display: 'flex', 
 
    flexDirection: 'column', 
 
    flexWrap: 'nowrap' 
 
    }); 
 
    $(this).find('.nav:first').css({ 
 
    order: 2, 
 
    }); 
 
}); 
 
// Make sure to hide the #navBr after it has been closed 
 
// and reset the display property. 
 
$('#navBr').on('hidden.bs.collapse', function() { 
 
    $(this).css({ 
 
    display: 'none', 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top navbar-expanded"> 
 
    <div class="container"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBr"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand page-scroll" href="#page-top"> 
 
     <img src="" class="img-responsive" alt="Motor Depot Logo" /> 
 
     </a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="navBr"> 
 

 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="hidden"> 
 
      <a class="page-scroll" href="#page-top"></a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#about">About</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#careers">Careers</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#news">News</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#contact">Contact</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#chat">Live Chat</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#phone">Phone</a> 
 
     </li> 
 
     </ul> 
 

 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li> 
 
      <a class="page-scroll" href="#home">Home</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#showrooms">Showrooms</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#search">Search</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#serviceMot">Service &amp; MOT</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#smartDrive">SmartDrive</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#value">Value Your Car</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#contact">Offers</a> 
 
     </li> 
 
     </ul> 
 

 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container --> 
 
</nav>