Bootstrap Collapse is not Collapsing

Question

I'm trying to create collapse using bootstrap and I also connected "data-target" and "id" which is navbarResponsive. I'm not sure what's wrong here.

This is my code:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
            
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
                    <span class="navbar-toggler-icon"></span>
                </button>
            
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#home">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#service">Experience</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>
                        
                    </ul>
                </div>
        </nav>

Answer 1

请确保您的 Jquery & bootstrap.js 文件与项目正确链接。

Answer 2

Make sure you import jquery before bootstrap. The same example is working with the following linking:

 <!-- first jquery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- then bootstrap js --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script> <!-- css --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#service">Experience</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </nav>