Boostrap 4 Navbar Collapse Menu右揃え

Question

私はBootstrap 4を使用していますが、左の代わりに右に開くために、折りたたみボタンをクリックしてポップアップメニューを作成しようとしています。私は "ul"要素に "ml-auto"を使ってみました。ナビゲーションバーの項目は、折りたたまれていないときは正しく表示されます。折りたたまれているとき、ボタンは正しく右側にありますが、メニューは左にポップアップします。私も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

あなたのCSSに単純なルールを追加するだけです。

.nav-item{ 
    text-align: right; 
}