仍然有折叠菜单的问题。根据引导程序的设置方式，当它崩溃时，它应该进入一个笔直的垂直导航，而不是仍然水平拉伸。它似乎只有在屏幕尺寸最低时才会垂直正确，即使只在其中一个菜单上正确显示。感谢Gary指出并帮助解决按钮和ID的第一个问题
第一张图片是它应该是什么样子
正确显示
我的显示器
这是我放在代码上的代码片段
<nav class="navbar navbar-expand-xl navbar-light bg-dark" id="topbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAlt" aria-controls="navbarNavAlt" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAlt">
<ul class="nav nav-navbar">
<li class="nav-item nav-link">
<a href="tel:1-702-555-5555">
<img src="image/phone.svg" height="15px" alt="Telephone"> (702)555-5555
</a>
</li>
<li class="nav-item nav-link">
<a href="mailto:mail@mail.com">
<img src="image/email.svg" height="15px" alt="Email"> mail@mail.com
</a>
</li>
<li class="nav-item nav-link" href="#">Premier Face Punching</li>
<li class="nav-item nav-link">
<a href="https://www.linkedin.com/company/Stuffnthings/">
<img src="image/linkedin.png" height="15px">
</a>
<a href="https://www.facebook.com/stuffnthings">
<img src="image/facebook.png" height="15px">
</a>
<a href="https://www.twitter.com/stuffnthings">
<img src="image/twitter.png" height="15px">
</a>
</li>
<li>
<input class="form-control border-secondary py-2" type="search" value="search">
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="mainnav">
<a class="navbar-brand" href="#">
<img src="image/VC-Logo.png" height="192px" alt="VC Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml auto" id="navbarNavAltMarkup">
<div class="nav nav-pills">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Web Design</a>
<a class="nav-item nav-link" href="#">Graphic Design</a>
<a class="nav-item nav-link" href="#">About US</a>
<a class="nav-item nav-link" href="#">Contact US</a>
</div>
</div>
</nav>
两个导航栏的目标属性相同。只需替换目标属性，按钮适用于不同的导航栏。当浏览器的宽度较小时，导航栏似乎变得垂直。
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-xl navbar-light bg-dark" id="topbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAlt" aria-controls="navbarNavAlt" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAlt">
<ul class="nav-navbar">
<li class="nav-item nav-link">
<a href="tel:1-702-555-5555">
<img src="image/phone.svg" height="15px" alt="Telephone"> (702)555-5555
</a>
</li>
<li class="nav-item nav-link">
<a href="mailto:mail@mail.com">
<img src="image/email.svg" height="15px" alt="Email"> mail@mail.com
</a>
</li>
<li class="nav-item nav-link" href="#">Premier Face Punching</li>
<li class="nav-item nav-link">
<a href="https://www.linkedin.com/company/Stuffnthings/">
<img src="image/linkedin.png" height="15px">
</a>
<a href="https://www.facebook.com/stuffnthings">
<img src="image/facebook.png" height="15px">
</a>
<a href="https://www.twitter.com/stuffnthings">
<img src="image/twitter.png" height="15px">
</a>
</li>
<li>
<input class="form-control border-secondary py-2" type="search" value="search">
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="mainnav">
<a class="navbar-brand" href="#">
<img src="image/VC-Logo.png" height="192px" alt="VC Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml auto" id="navbarNavAltMarkup">
<div class="nav-pills">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Web Design</a>
<a class="nav-item nav-link" href="#">Graphic Design</a>
<a class="nav-item nav-link" href="#">About US</a>
<a class="nav-item nav-link" href="#">Contact US</a>
</div>
</div>
</nav>
</body>
</html>