navbarのブートストラップ4を右に合わせる

Question

私は、パーソナルプロジェクトに新しいバージョンのBootstrapを使用しようとしています。私はnavbarを作ろうとしましたが、リンクを右に揃えたいと思って解決策を探しましたが、どうやってそれをするのか分かりませんでした。 ここに私のコードだ

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
 
      data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" 
 
      aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <a class="navbar-brand" href="#">taïho sushi</a> 
 
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
 
     <div class="navbar-nav"> 
 
      <a class="nav-item nav-link active" href="#">Présentation</a> 
 
      <a class="nav-item nav-link" href="#">Menu</a> 
 
      <a class="nav-item nav-link" href="#">Contact</a> 
 
     </div> 
 
    </div> 
 
</nav>

Answer 1

使用navbar-rightクラス

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
      data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" 
      aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">taïho sushi</a> 
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
     <div class="navbar-nav navbar-right"> 
      <a class="nav-item nav-link active" href="#">Présentation</a> 
      <a class="nav-item nav-link" href="#">Menu</a> 
      <a class="nav-item nav-link" href="#">Contact</a> 
     </div> 
    </div> 
</nav> 

Answer 2

margin-left:autoを設定し、右にコンテンツをプッシュする新しいml-autoクラスを使用します。

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
      data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" 
      aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">taïho sushi</a> 
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
     <div class="navbar-nav ml-auto"> 
      <a class="nav-item nav-link active" href="#">Présentation</a> 
      <a class="nav-item nav-link" href="#">Menu</a> 
      <a class="nav-item nav-link" href="#">Contact</a> 
     </div> 
    </div> 
</nav> 

Demo on Codeply