How do I align navbar items to right in Bootstrap 4? [duplicate]-CodePudding

Now I know that similar questions have been dealt with here, but none of those solves my problem. So please understand. I've tried ml-auto next to navbar-nav class, but somehow the items are align to the left. Please see my code below:

    <nav class="navbar navbar-default navbar-expand nav-bar fixed-top">
        <div class='navbar-brand nav-link' onclick="location.href='/'">
            <img class="ci" src="{% static 'museum/images/ci.png' %}" alt='ci'>
        </div>
        <div class="navbar-text">
            <ul class="navbar-nav ml-auto">
                <li class='navbar-item'>Home</li>
                <li class='navbar-item my-auto'>Menu</li>
            </ul>
        </div>
    </nav>

I haven't touched anything in the CSS, but the items are aligned to the left. What is the problem? Thanks.

CodePudding user response：

you need to "collapse" div and add collapse div justify-content:flex-end;

https://getbootstrap.com/docs/4.6/components/navbar/

   <nav class="navbar navbar-default navbar-expand nav-bar fixed-top">
    <div class='navbar-brand nav-link' onclick="location.href='/'">
        <img class="ci" src="{% static 'museum/images/ci.png' %}" alt='ci'>
    </div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
    <div class="collapse navbar-collapse" style="justify-content:flex-end;" id="navbarNav">
        <ul class="navbar-nav">
            <li class='navbar-item'>Home</li>
            <li class='navbar-item my-auto'>Menu</li>
        </ul>
    </div>
</nav>