부스트랩 4 내비게이션 축소 메뉴 오른쪽 정렬

Question

부트 스트랩 4를 사용 중이고 왼쪽 대신 오른쪽에서 열려면 접기 버튼을 클릭하여 팝업 메뉴를 표시하려고합니다. 나는 "ul"요소에 "ml-auto"를 사용하려고 시도했다. 탐색 표시 줄 항목은 접히지 않을 때 오른쪽에 올바르게 있습니다. 축소되면 버튼이 오른쪽에 올바르게 표시되지만 메뉴가 왼쪽에 나타납니다. 나는 또한 "ml-auto"를 div에 넣으려고했으나 작동하지 않았다. 여기 내 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; 
}