Bootstrap 4Navbar折りたたみメニュー右揃え

Question

Bootstrap 4を使用していて、折りたたむボタンをクリックしてポップアップするメニューを左側ではなく右側に表示しようとしています。「ml-auto」を使用してみました「ul」要素にあります。ナビゲーションバーの項目は、折りたたまれていないときは右側に正しくあります。折りたたまれているときは、ボタンは正しく右側にありますが、メニューは左側にポップアップします。私も入れてみましたdivの「ml-auto」も機能しませんでした。これが私のHTMLです。

<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
    <a class="navbar-brand" href="#home"><img id="logo" class="no-opacity" src="content/white-logo.png"></a>
    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp;Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#about"><i class="fa fa-user fa-fw" aria-hidden="true"></i>&nbsp;About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#projects"><i class="fa fa-folder-open fa-fw" aria-hidden="true"></i>&nbsp;Projects</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#experience"><i class="fa fa-briefcase fa-fw" aria-hidden="true"></i>&nbsp;Experience</a>
            </li>       
            <li class="nav-item">
                <a class="nav-link" href="#contact"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i>&nbsp;Contact</a>
            </li>                     
        </ul>
    </div>
</nav>

簡単な解決策があるように感じますが、理解できません。助けてくれてありがとう！

Answer 1

HTMLで「text-right」を使用するだけです

例えば：

<div class="navbar-collapse text-right" id="navbarResponsive">