navbar-toggler-right이 작동하지 않습니다.

Question

navbar 안에 ul에있는 navbar-toggler-right을 사용하면 모든 것들이 navbar 외부로 조금씩 이동하며이를 해결하는 방법을 모르겠습니다.

여기 내 코드입니다 : 원하는 결과를 얻을 것입니다

<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="nav-main"> 
    <button class="navbar-toggler navbar-toggler-right" 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> 
    <a class="navbar-brand" href="#"> 
     <img src="images/logo-menu-2.png" alt="Motiva Mente"> 
    </a> 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
      <ul class="navbar-nav mr-auto navbar-toggler-right"> 
      <li class="nav-item dropdown"> 
       <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">CATEGORIAS</a> 
       <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
        <a class="dropdown-item" href="#">MUSCULAÇÃO</a> 
        <a class="dropdown-item" href="#">AERÓBICO<a> 
        <a class="dropdown-item" href="#">FUNCIONAL</a> 
        <a class="dropdown-item" href="#">FISIOLOGIA</a> 
        <a class="dropdown-item" href="#">BIOMECÂNICA</a> 
       </div> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">NOTÍCIAS</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">SOBRE</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">CONTATO</a> 
      </li> 
      <li> 
       <form class="form-inline my-2 my-lg-0"> 
        <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
        <button id="botao-search" class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button> 
       </form> 
      </li> 
     </ul> 
    </div> 
</nav> 

Answer 1

대안의 navbar-toggle-right를 제거하고 ml-auto 클래스로 대체하는 것입니다. 또한 form 요소를 unordered-list 요소와 분리해야합니다.

코드에서 생성 된 codeply project에서이 기능이 어떻게 작동하는지 확인할 수 있습니다.

마크 업은 다음과 같습니다.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="nav-main"> 
    <button class="navbar-toggler navbar-toggler-right" 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> 
    <a class="navbar-brand" href="#"> 
     <img src="http://via.placeholder.com/150x80" alt="Motiva Mente"> 
    </a> 

    <div class="collapse navbar-collapse " id="navbarSupportedContent"> 
      <ul class="navbar-nav ml-auto"> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">CATEGORIAS</a> 
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
         <a class="dropdown-item" href="#">MUSCULAÇÃO</a> 
         <a class="dropdown-item" href="#">AERÓBICO</a> 
         <a class="dropdown-item" href="#">FUNCIONAL</a> 
         <a class="dropdown-item" href="#">FISIOLOGIA</a> 
         <a class="dropdown-item" href="#">BIOMECÂNICA</a> 
        </div> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">NOTÍCIAS</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">SOBRE</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">CONTATO</a> 
       </li> 

      </ul> 
      <form class="form-inline my-2 my-lg-0"> 
       <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
       <button id="botao-search" class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button> 
      </form> 
    </div> 
</nav>