ナビゲーションバーに2つの別々のメニューリンクを揃える方法は？

Question

デモ：https://www.bootply.com/FeTVydhGoT

ログインリンクを除くすべてのリンクを折りたたむナビゲーションバーを作成しました。私は、このログインリンクを別の要素としてモバイルデバイスに表示することを希望しますが、問題は不適切なアラインメントであるようです。ログインテキストは、残りのメニューリンクの数ピクセル下にあります。どうすればそれを適切に整列させることができますか私はログインリンクでmargin-topを使ってみましたが、結果は決して完全には整列していません。 navに加えて

Answer 1

使用navbar-nav ...

 <ul class="nav navbar-nav"> 
     <li class="pull-right"> 
      <a href="#" id="login">Login</a> 
     </li> 
     </ul> 

また、それはフロートのように見えます（プル左、右プル、ナビゲーションバーの右、等...）は、使い古されています。