ブートストラップ4 - トグルボタンでナビゲーションバーの右側にリンクを移動

Question

リンクをナビゲーションバーの左側から右側に移動しようとしていましたが、それができませんでした。私はそれを右に浮かそうとしましたが、何も起こっていませんでした。右：200ピクセル。パディング右：-200px。誰か他の提案があれば感謝します。

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 

    <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="index.html"> 

     <img id="logo" src="images/logo.png" width="200" class="d-inline-block align-top" alt=""> 

    </a> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 

     <ul class="navbar-nav mr-auto"> 

      <li class="nav-item"> 
       <a class="nav-link active text-white" href="index.html">Home <span class="sr-only">(current)</span></a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link text-white" href="services.html">Services</a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link text-white" href="portfolio.html">Portfolio</a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link text-white" href="about.html">About</a> 
      </li> 

     </ul> 

    </div> 
</nav> 

Answer 1

あなたはあなたがmargin-right: auto !importantを持っており、左揃えのnav-アイテム.mr-autoを使用しています。
あなたが.ml-autoにクラスを変更する場合は、margin-left: auto !importantを持っているし、あなたのNAV-項目が右

Answer 2

を整列され、ブートストラップにいくつかのCSSを変更します。最後

.mr-auto { 
    margin-right: 0 !important; 
} 
.navbar-toggleable-md .navbar-collapse {   
    -webkit-justify-content: flex-end; 
    justify-content: flex-end; 
} 

のためのコンテンツを開始するjustify-content: end;を使用し

はこちらフィドルコード：https://jsfiddle.net/0ewenvcb/2/