Bootstrap4导航栏折叠按钮无响应

Question

I can see the navbar however when I click it to have dropdown it is not responding.

<!-- 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>

I am using bootstrap4 and all the classes are from bootstrap. Thanks in advance!

Answer 1

HTML/CSS looks good. Make sure you're including jQuery, poppper.js and bootstrap.js in that order or else any functionality that depends on it will not work.

Pasted it into this codepen and it works fine.