ブートストラップ4のNavbarの右へのリンクの整列

Question

bootstrap-4のnavbarの右側へのリンクを整列させる方法を教えてください。以下は私のコードです：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
 
    <a class="navbar-brand" href="#">Navbar</a> 
 
    <div class="mr-auto"> 
 
    <div class="float-right"> 
 
     <ul class="navbar-nav"> 
 
     <li class="nav-item mr-3"> 
 
      <a href="#"><i class="fa fa-commenting-o text-light fa-lg"></i></a> 
 
     </li> 
 
     <li class="nav-item mr-3"> 
 
      <div class="dropdown"> 
 
      <a id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
       <i class="fa fa-ellipsis-v text-light fa-lg"></i> 
 
      </a> 
 
      <div class="dropdown-menu" aria-labelledby="dropdownMenu"> 
 
       <a class="dropdown-item" href="#">Action</a> 
 
       <a class="dropdown-item" href="#">Another action</a> 
 
       <a class="dropdown-item" href="#">Something else here</a> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

私はあなたが望むクラスにmr-autoを追加ナビゲーションバー

Answer 1

Does this answer your question?

の右側にシフトするコメントアイコンと垂直省略記号のアイコンをしたいです右に整列し、navクラスからnavbar-expand-lgを削除します。
Codepen Example