在Bootstrap中右对齐菜单

Question

这是我目前的代码：我试图将菜单移动到右边。我能够通过铬检查员做到这一点并改变它，但我卡在这里 - 无法将它向右移动

<!--top-Header-menu-->
<div id="user-nav" class="navbar navbar-inverse">
  <ul class="nav navbar-nav navbar-right">


<!-- Messages - menu -->

    <li class="dropdown" id="menu-messages"><a href="#" data-toggle="dropdown" data-target="#menu-messages" class="dropdown-toggle"><img src="img/messages_icon.png"></I> <span class="text"></span> <span class="label label-important">5</span> </a>
      <ul class="dropdown-menu">
        <li><a class="sAdd" title="" href="#"><i class="icon-plus"></i> new message</a></li>
        <li class="divider"></li>
        <li><a class="sInbox" title="" href="#"><i class="icon-envelope"></i> inbox</a></li>
        <li class="divider"></li>
        <li><a class="sOutbox" title="" href="#"><i class="icon-arrow-up"></i> outbox</a></li>
        <li class="divider"></li>
        <li><a class="sTrash" title="" href="#"><i class="icon-trash"></i> trash</a></li>
      </ul>
    </li>

<!-- Settings - menu -->


    <li class=""><a title="" href="#"> <img src="img/settings_icon.png"><span class="text"></span></a></li>

<!-- Notifications - menu -->


    <li class=""><a title="" href="#"> <img src="img/notifications_icon.png"><span class="text"></span></a></li>




    <li  class="dropdown" id="profile-messages" ><a title="" href="#" data-toggle="dropdown" data-target="#profile-messages" class="dropdown-toggle"></i> <img src="img/user_top.png"> <span class="text">Account Name</span></a>
      <ul class="dropdown-menu">


        <li><a href="#"><i class="icon-user"></i> My Profile</a></li>


        <li class="divider"></li>


        <li><a href="#"><i class="icon-check"></i> My Tasks</a></li>



        <li class="divider"></li>


        <li><a href="login.html"><i class="icon-key"></i> Log Out</a></li>


      </ul>
    </li>

  </ul>
</div>