Bootstrap4导航栏折叠按钮无响应

时间:2019-05-10 00:40:13

标签: html css

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

<!-- 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。预先感谢!

1 个答案:

答案 0 :(得分:5)

HTML / CSS看起来不错。确保按该顺序包含jQuery,poppper.js和bootstrap.js,否则任何依赖于它的功能将无法正常工作。

将其粘贴到this codepen中,效果很好。