创建 Bootstrap 4 两行导航栏定制设计

Question

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

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

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

• 顶部导航具有指向最左侧和最右侧的链接
• 底部导航的最左侧是搜索，中间是品牌，最右侧是用户头像下拉菜单。
• 当导航栏在移动设备中折叠时，它应该只在最左边显示汉堡图标，在中间显示品牌，在最右边显示搜索图标，这将折叠搜索（我的第二个问题以后自己锻炼）。
• 当点击汉堡时，它应该首先显示头像下拉列表，然后从顶部导航栏中列出以下导航项目。

问题是，要有两个导航栏，你必须有两个折叠。我尝试过使用一个导航栏，里面有两个导航栏导航（我的 sn-p 显示），但是根据我的图像定位它们不起作用。

我的代码附加的 sn-p 不是很好，因为我没有正确理解如何在其中使用 flexbox，但正如你所见，没有什么是正确的。

我的代码笔的链接： 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

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

<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