带有glyphicon的导航栏文本彼此顶部而不是彼此相邻

Question

我已经创建了一个导航栏，我希望看到名称旁边带有小箭头的地方。

代码如下：

<nav class="nav navbar-nav pull-right">
  <ul class="navbar-right">

    <!-- Logged in user and drop down -->
    <li class="nav-item dropdown" style="padding-left: 15px; padding-right: 15px;">
      <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="navbarDropdown">
        <div class="row">
          <span>{{ Auth::user()->name }}</span>
          <span class=" fa fa-angle-down"></span>
        </div>
      </a>
      <ul class="dropdown-menu dropdown-usermenu" aria-labelledby="navbarDropdown">
        <li><a href="{{ route('profile',Auth::user()->id) }}">Profile</a></li>
        <li><a href="{{ route('help') }}">Tutorial</a></li>
        <li><a id="logout"><i class="fa fa-sign-out pull-right"></i>Log Out</a></li>
      </ul>
    </li>

  </ul>
</nav>

所以名称在右边，但是当我想在名称的右边时，箭头在名称下方。

类似这样的东西：

John Doe v

但是我有：

John Doe
       v