I've seen this question asked a lot on here, but my code seems to be correct. My data-target id matches the id of the collapse div. not sure why then menu isn't opening when I click on the hamburger icon.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container">
<a href="index.html" class="navbar-brand">LoopLab</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#explore-head-section" class="nav-link">Explore</a>
</li>
<li class="nav-item">
<a href="#create-head-section" class="nav-link">Create</a>
</li>
<li class="nav-item">
<a href="#share-head-section" class="nav-link">Share</a>
</li>
</ul>
</div>
</div>
</nav>
2条答案
按热度按时间lnxxn5zx1#
当我使用你的代码和Bootstrap 4模板时,它看起来工作正常。2确保你正确地加载了Bootstrap的JS和CSS。3使用小窗口可以看到汉堡菜单图标。
slwdgvem2#
对于项目Angular:
请确保
angular.json
文件中包含bootstrap.css
、jquery.js
和bootstrap.js
文件。例如: