bootstrap 折叠导航栏不起作用。每当我在较小的屏幕上按图标时,菜单都不会打开,我该如何解决?
bootstrap collapse navbar not working. whenever i press the icon in a smaller screen the menu does not open, how do i fix?
汉堡菜单不起作用。每当我按下小屏幕上的汉堡包图标时,导航就不会出现。请告诉我如何解决这个问题。 :/
<nav class="navbar bg-dark navbar-dark navbar-expand-lg">
<div class="container">
<a href="./index.html" class="navbar-brand"><img src="./images/StoreLogo.png" alt="Home" width="70px" height="auto"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarResponsive" class="collapse navbar-collapse" >
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="./index.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="./AboutUs.html">About Us</a>
</li>
</ul>
</div>
</div>
假设您使用的是 Bootstrap 5,与 bootstrap 4 相比,一些属性发生了变化。
像这样更改您的代码
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a href="./index.html" class="navbar-brand"><img src="./images/StoreLogo.png" alt="Home" width="70px" height="auto"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./AboutUs.html">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
单击此处了解更多信息Documentation
汉堡菜单不起作用。每当我按下小屏幕上的汉堡包图标时,导航就不会出现。请告诉我如何解决这个问题。 :/
<nav class="navbar bg-dark navbar-dark navbar-expand-lg">
<div class="container">
<a href="./index.html" class="navbar-brand"><img src="./images/StoreLogo.png" alt="Home" width="70px" height="auto"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarResponsive" class="collapse navbar-collapse" >
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="./index.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="./AboutUs.html">About Us</a>
</li>
</ul>
</div>
</div>
假设您使用的是 Bootstrap 5,与 bootstrap 4 相比,一些属性发生了变化。 像这样更改您的代码
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a href="./index.html" class="navbar-brand"><img src="./images/StoreLogo.png" alt="Home" width="70px" height="auto"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./AboutUs.html">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
单击此处了解更多信息Documentation