时间戳

首页 > 解决方案 > Bootstrap4 导航栏折叠按钮没有响应

html - Bootstrap4 导航栏折叠按钮没有响应

问题描述

我可以看到导航栏，但是当我单击它以显示下拉菜单时，它没有响应。

<!-- 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。提前致谢！

标签： htmlcss

解决方案

HTML/CSS 看起来不错。确保您包含 jQuery、poppper.js 并且bootstrap.js按照该顺序，否则任何依赖于它的功能都将不起作用。

将它粘贴到这个代码笔中，它工作正常。

推荐阅读