-navbar toggler droite ne fonctionne pas

Question

Lorsque j'utilise navbar-toggler-right dans le ul à l'intérieur du navbar, tous les trucs va un peu en dehors du navbar, et je ne sais pas comment résoudre ce problème.

Voici mon code:

<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

Une alternative qui donnera le résultat souhaité, est d'enlever la navbar-toggle-right et le remplacer par la classe ml-auto. De plus, vous voudriez que votre élément de formulaire soit séparé de votre élément de liste non ordonnée.

Vous pouvez voir comment cela fonctionne dans ce codeply project que j'ai créé avec votre code.

La majoration ressemblerait à ceci.

<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>