我可以看到导航栏,但是当我单击它以显示下拉菜单时它没有响应。
<!-- Navbar -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">
<!-- Logo -->
My name
</a>
<!-- collapse when screen get small -->
<button type="button" class="navbar-toggler" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<!-- ml-auto: Setting navbar to right -->
<ul class="nav navbar-nav ml-auto">
<!-- active class makes current location brighter -->
<li class="nav-item">
<!-- #home goes to <div id="home"> -->
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about_me">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#References">References</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
我正在使用bootstrap4,所有的类都来自bootstrap。预先感谢!
答案 0 :(得分:5)
HTML / CSS看起来不错。确保按该顺序包含jQuery,poppper.js和bootstrap.js
,否则任何依赖于它的功能将无法正常工作。
将其粘贴到this codepen中,效果很好。