我想要两个带有单个切换的导航栏。第一个是徽标、电子邮件图标和搜索框。下面的链接用于其他链接。在较小的屏幕中使用切换时，我希望顶部导航栏中的项目显示在第二个导航栏下方。我想这样做：
主页
关于
院系
招生
下载
电子邮件
搜索
<nav class="navbar navbar-expand-xl navbar-light" style="background-color:#FFFFFF;" id="navtop">
<a class="navbar-brand" href="#"><img src="logo.png"></a>
<button class="navbar-toggler" data-toggle="collapse" data-target=".navbars">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbars" id="collapse_target1">
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link" href=""><i class="far fa-envelope"></i></a>
</li>
</ul>
<form class="form-inline">
<input class="form-control form-control-sm" type="search" placeholder="Search">
<button class="btn btn-light btn-sm " type="submit"><i class="fas fa-search" aria-hidden="true"></i></button>
</form>
</div>
</nav>
<nav class="navbar navbar-expand-xl sticky-top" style="background-color:#FFFFFF;" id="navbottom" >
<div class="collapse navbar-collapse navbars" id="collapse_target2" >
<ul class="navbar-nav mx-auto" >
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Departments</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Admissions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Downloads</a>
</li>
</ul>
</div>
</nav>
如果您想在小屏幕和大屏幕之间更改项目的顺序，将主菜单项放在第二行，那么使用一个导航栏并使用灵活顺序可能是最简单的。
我删除了第二个导航栏，并在navbar-collapsediv下添加了一个容器div。新div的样式(使用Bootstrap类(为display: flex，最初设置为flex-direction: column(这样菜单项就可以在一列中显示(，在中断点处，显示切换到flex-direction: row和flex-wrap: wrap，这样主菜单就会换行到第二行。
订单从菜单项开始，然后是电子邮件，然后是搜索。这就是导航栏内容在移动设备上的显示顺序，以及屏幕阅读器如何读取。我使用order-md-1 -2 -3来更改宽屏幕的顺序。
徽标图像是绝对位置使用的，因此其大小不会影响主菜单的居中。最初的问题没有包括任何关于徽标图像的信息，所以我使用了一个小的placeholder.com图像。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light" id="navtop">
<a class="navbar-brand p-0 position-absolute align-self-start" href="#"><img src="
https://via.placeholder.com/120x60.png?text=Logo" alt="Logo" style="height: 1.875rem; width: auto;"></a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapse_target1" aria-controls="collapse_target1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbars" id="collapse_target1">
<div class="flex-container w-100 d-flex flex-column flex-md-row flex-md-wrap">
<ul id="lower-nav" class="navbar-nav mr-auto order-md-3 justify-content-md-center w-100">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Departments</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Admissions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Downloads</a>
</li>
</ul>
<ul class="navbar-nav mr-auto mr-md-0 ml-md-auto order-md-1">
<li class="nav-item px-3 pl-md-0">
<a class="nav-link" href=""><i class="far fa-envelope"></i></a>
</li>
</ul>
<form class="form-inline mr-auto mr-md-0 order-md-2">
<input class="form-control form-control-sm" type="search" placeholder="Search">
<button class="btn btn-light btn-sm " type="submit"><i class="fas fa-search" aria-hidden="true"></i></button>
</form>
</div>
</div>
</nav>
<div class="content text-center vh-100 bg-info">
Center
</div>