Javascript 引导3图示符图标在下拉菜单中未对齐

我正在使用Bootstrap 3制作一个简单的下拉菜单，对我的用户列表进行排序，如下所示：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="sortUsers" data-toggle="dropdown">
    Sort by
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="sortUsers">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">First Name<span class="glyphicon glyphicon-sort-by-alphabet"></span></a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Last Name</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Nickname</a></li>
  </ul>
</div>

排序

但是，glyphicon不在同一行上对齐。我怎样才能让它和“名字”在同一行

---

您使用的是什么版本的引导？ 新版本3.3.1工作正常，这里是工作小提琴

排序

非常感谢您的调查。因为JavaScript和HTML似乎不是问题所在，所以我决定检查我的css文件，发现我覆盖了默认的下拉类规范。我已经对它进行了调整，现在它可以正常工作了。再次感谢所有帮助过我的人，我将投票。：）

再次检查您的代码。我测试你的代码。它起作用了。对我来说也一样

 <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="sortUsers" data-toggle="dropdown">
        Sort by
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="sortUsers">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">First Name <span class="glyphicon glyphicon-sort-by-alphabet"></span></a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Last Name</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Nickname</a></li>
      </ul>
    </div>