Bootstrap导航栏调整动态div旁边的div边距

Question

我有一个div在移动视图中不会崩溃（始终可见），但是当存在可折叠链接时，它会在较大的显示上引起问题（如下所示）。

有没有办法让可折叠链接显示在dynamic（userInfo）div的左侧？ 试图找到一个css解决方案，所以angular / javascript将是最后的选择。

期望效果的例子：

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

<a class="navbar-brand" href=""><img src="http://placehold.it/599x255&text=Logo"></a>
<h4 class="navbar-text" id="navbarTitle">This is my navbar title</h4>

<ul class="nav" id="userInfo"> <!-- Dynamic -->
  <li class="dropdown pull-right">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      <span class="glyphicon glyphicon-user icon-right"></span><b>{{empName}}</b>
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="/logout" title="Logout"><span class="glyphicon glyphicon-log-out icon-right"></span>Logout </a></li>
    </ul>
  </li>
</ul>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-log-out icon-right"> Dropdown<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
    </ul>
  </li>
  <!--<li><a href="" id="logoutBtn"><span class="glyphicon glyphicon-log-out icon-right"></span>Logout</a></li>-->
</ul>
</div>

Plnkr Demo || JSFiddle Demo

修改（结果重新修改）：

我希望div中的链接与“nav navbar-nav navbar-right”类始终留在ID为“userInfo”的div中。