在引導程序4上將鏈接對齊到導航欄上4

Question

如何在引導程序-4中將鏈接對齊到導航欄的右側。下面是我的代碼：

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

我要評論圖標和垂直省略號圖標轉移在導航欄

Answer 1

Does this answer your question?

的右側添加mr-auto您想要的類對齊並從您的導航類中刪除navbar-expand-lg。
Codepen Example