Question

我必须在Bootstrap中构建一个响应式双条头 - 基本上我有两个导航 - 如下所示 - 第一个导航是一个子导航但是由于设计它在导航导航器上面的小例子 - 我的问题是我想要用移动按钮折叠和打开 - 但是我需要反转命令 - 所以主导航（第二个列表 - 从home开始）首先出现 - 这可能是简单的 - 还是需要一个jquery脚本？ / p>

<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，并使用第一个order元素上的.nav属性来自第二个.nav元素。

这是一个例子，确定你会明白这个想法。

＆＃13;

$('#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',
  });
});

＆＃13;

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

＆＃13;

Bootstrap Multi Nav Bars

1 个答案: