【发布时间】：2022-01-21 17:03:56
【问题描述】：
我用 Bootstrap 创建了一个导航栏。在大屏幕上似乎一切正常，但在小屏幕上，当我单击切换器图标时，菜单不会折叠。我尝试了多种方法，例如编写“显示：内容；”在css文件中，但没有任何效果。你能告诉我我做错了什么吗？这是我的代码：
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" width="100"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- home -->
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html" style="margin-left: 20px">Home</a>
</li>
<!--- women --->
<li class="nav-item dropdown">
<div class="dropdown">
<a class="nav-link dropdown" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
Women
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Clothes</a>
<a class="dropdown-item" href="#">Accessories</a>
<a class="dropdown-item" href="#">Shoes</a>
</div>
</div>
</li>
<!--- men --->
<li class="nav-item dropdown">
<div class="dropdown">
<a class="nav-link dropdown" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
Men
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Clothes</a>
<a class="dropdown-item" href="#">Accessories</a>
<a class="dropdown-item" href="#">Shoes</a>
</div>
</div>
</li>
<!--- help --->
<li class="nav-item dropdown">
<div class="dropdown">
<a class="nav-link dropdown" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
Help
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="sizes.html">Sizes</a>
<a class="dropdown-item" href="faqs.html">FAQs</a>
<a class="dropdown-item" href="contact-us.html">Contact Us</a>
<a class="dropdown-item" href="about-us.html">About Us</a>
</div>
</div>
</li>
<!-- search box -->
<form class="form-inline">
<input class="form-control rounded" type="search" placeholder="What are you looking for?" aria-label="Search" size=60px style="text-align: left;">
<button type="submit" class="btn btn-outline-dark" style="margin-left: 5px"><i class="bi bi-search"></i></button>
</form>
<!-- shopping cart -->
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="cart.html">
<i class="bi bi-bag" style="font-size: 30px; margin-left: 650px;"></i>
<span class="cart-basket d-flex align-items-center justify-content-center">
0
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>【问题讨论】：
标签： html bootstrap-4 menu navbar