我想要两个带有单个切换的导航栏。第一个用于徽标、电子邮件图标和搜索框。下面的一个用于其他链接。在较小的屏幕中使用切换时，我希望顶部导航栏中的项目出现在第二个导航栏下方。我想这样：
首页
关于
部门
招生
下载
电子邮件
搜索
<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>
如果您想更改小屏幕和大屏幕之间的项目顺序，主菜单项在第二行，使用一个导航栏并使用弹性顺序可能是最简单的。
我删除了第二个导航栏并在 div 下添加了一个容器navbar-collapsediv。新 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/[email protected]/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/[email protected]/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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句