jquery - 创建 Bootstrap 4 两行导航栏自定义设计

Question

我正在尝试创建一个自定义导航，我发现它在互联网上的其他任何地方都没有被复制。我到处搜索一些示例解决方案，但无济于事，所以希望有人能帮助我在此处的 Bootstrap 4 中实现这一目标。

下面的图片显示了我如何尝试在 Bootstrap 中重新创建，但事实证明它更难应用。

它是桌面上的两行导航栏。

• 顶部导航有指向最左侧和最右侧的链接
• 底部导航栏的搜索位于最左侧，品牌位于中间，用户头像下拉菜单位于最右侧。
• 当导航栏在手机上折叠时，它应该只在最左边显示汉堡包图标，在中间显示品牌，在最右边显示搜索图标，这将折叠搜索(我的第二个问题稍后锻炼自己)。
• 点击汉堡包时，它应该首先显示头像下拉菜单，然后列出顶部导航栏中的以下导航项。

问题是，要有两个导航栏，您必须有两个折叠。我试过使用一个导航栏，里面有两个导航栏导航(我的代码片段显示了这一点)，但是根据我的图像将它们相应地定位是行不通的。

我的代码的附加片段不是很好，因为我没有正确理解如何在其中使用 flexbox，但没有任何东西像你看到的那样正确放置。

我的codepen的链接: https://codepen.io/krystyna93/pen/PLyMPr?editors=1100

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="navbar navbar-light bg-light navbar-expand-md">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo/Brand</a>

  <div id="navbar" class="navbar-collapse collapse flex-column w-100">
    <ul class="navbar-nav flex-lg-column w-100">
      <li class="nav-item"><a class="nav-link" href="#">LinkA</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkB</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkC</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkD</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkE</a></li>
    </ul>
    <ul class="navbar-nav flex-lg-column w-100">
      <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link3</a></li>
    </ul>
  </div>
  <!--/.nav-collapse -->
</div>

一定有办法做到这一点，但我为此苦苦挣扎，每次靠近时都会碰到砖墙。

我也尽量不要在桌面和移动设备上重复使用列表项，因为那太多余了。

任何帮助将不胜感激。 谢谢

Answer 1

我想您可以从这里算出其余部分。 基本上，您的第一行链接、折叠按钮、 Logo 、搜索框、用户下拉菜单都应该直接位于导航栏下方。导航栏应该是行和包裹的。从那时起，它主要只是重新排列顺序。

<div class="navbar navbar-light bg-light navbar-expand-md flex-row flex-wrap">
    <a class="navbar-brand flex-grow-1 justify-content-center order-sm-2 order-3 order-md-3" href="#" >Logo/Brand</a>
    <button class="navbar-toggler order-1 order-xs-1 order-md-4" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <button class="navbar-toggler order-3 order-xs-3 order-md-5" type="button" data-toggle="collapse" data-target="#search" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>


  <div id="navbar" class="navbar-collapse collapse flex-row w-100 order-5 order-sm-5 order-md-1">
    <ul class="navbar-nav justify-content-start flex-grow-1">
      <li class="nav-item"><a class="nav-link" href="#">LinkA</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkB</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkC</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkD</a></li>
      <li class="nav-item"><a class="nav-link" href="#">LinkE</a></li>
    </ul>
    <ul class="navbar-nav justify-content-end flex-grow-1">
      <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link3</a></li>
    </ul>

  </div><!--/.nav-collapse -->
  <div id="search" class="navbar-collapse collapse flex-row order-sm-4 order-4 order-md-2 ">
      <input type="text" />
      <button >Search</button>
    </div>




</div>

https://codepen.io/anon/pen/movbMy?editors=1000