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クラスに置き換えることです。さらに、フォーム要素を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>