Bootstrap toggle the nav bar-CodePudding

I am using the following code:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav >
    
    <a  href="#">NavBar</a>

    <button 
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNav"
        
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
        >
        <span ></span>
    </button>

    <div  id="navbarNav">
        <ul >
            <li >
                <a href="#" >Blue</a>
            </li>
            <li >
                <a href="#" >Red</a>
            </li>
            <li >
                <a href="#" >Green</a>
            </li>

        </ul>

    </div>

    
</nav>

When the window is small enough the nav bar li stuffs disappear and the menu icon appear, that is good. But when the menu icon appear and I click on it, li stuffs do not appear as it suppose to be. The nav li stuffs should appear below each other.

What is the problem with my code?

CodePudding user response：

I think you just forgot to add the boostrap script tag at the begining of your code:

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>

This is the version for [email protected], but You just have to find the one for [email protected]

With this your nav bar work fine !

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>
<nav >

<a  href="#">NavBar</a>

<button 
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#navbarNav"
    
    aria-controls="navbarNav"
    aria-expanded="false"
    aria-label="Toggle navigation"
    >
    <span ></span>
</button>

<div  id="navbarNav">
    <ul >
        <li >
            <a href="#" >Blue</a>
        </li>
        <li >
            <a href="#" >Red</a>
        </li>
        <li >
            <a href="#" >Green</a>
        </li>

    </ul>

</div>


</nav>