Bootstrap nav collapsing in a row instead of vertically-CodePudding

I have a Navbar which is collapsing fine but for some reason when you click the toggle icon once collapsed, the items appear in a horizontal row, instead of the intended vertical block. I've looked at (and basically copied) code from the bootstrap 5 example page but the one there does work as intended (vertical drop down once collapsed) and mine doesn't.

    <div >
        <div >
            <a  href="/">Logo</a>
            <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
            </button>
        <div  id="navbarToggler">
            <ul >
                <li ><a  href="/link1">Link 1</a></li>
                <li ><a  href="/link2">Link 2</a></li>
                <li ><a  href="/link3">Link 3</a></li>        
            </ul>
        </div>
        </div>
    </div>

What am I doing wrong? This is what I'm getting when I collapse the menu (should be vertically stacked on the right hand side where the toggle icon is?

I tried the solution here but for me that stacks it vertically all the time not just on collapse

EDIT - updated so it's actual HTML not Pug code and also simplified it by removing non important elements. There's no additional CSS applied it just uses Bootstrap default.

CodePudding user response：

Well The nav nav-pills classes are the difference between your code and bs example

  <ul >
    <li >
      <a  aria-current="page" href="#">Home</a>
    </li>
    <li >
      <a  href="#">Link</a>
    </li>
    <li >
      <a  href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
  </ul>

This is bootstrap's example and as you can see it uses navbar-nav Not nav nav-pills

If you want to use .nav-pills , you should set these classes to your .nav element

flex-column flex-sm-row

The flex-column class set's flex-direction: column; to your element and flex-sm-row restores that change on devices that are larger than sm (larger than 576px)