Bootstrap 多导航栏

Question

我必须在 Bootstrap 中构建一个响应式双栏标题 - 基本上我有两个导航 - 如下 - 第一个导航是子导航，但由于设计的原因，它在领先导航上方的情况下较小 - 我的问题是我想用移动按钮折叠和打开 - 但我需要颠倒订单 - 以便主导航（第二个列表 - 从 home 开始）首先出现 - 这可能简单 - 还是需要 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>