Bootstrap 3 Glyphicon未在下拉菜单中对齐

Question

我正在使用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未在同一行上对齐。如何使它与“名字”在同一行？

Answer 1

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

http://jsfiddle.net/52VtD/9050/

 <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>

Answer 2

非常感谢您的调查。由于看起来JavaScript和HTML不是问题，我决定检查我的css文件，发现我重写了默认的下拉类规范。我已调整它，现在它按预期工作。再次感谢所有帮助过的人，我将全力以赴。 ：）