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

您正在使用什么版本的引導程序？ 新版本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文件，發現我覆蓋了默認的下拉列表類規范。 此后，我對其進行了調整，現在它可以按預期運行。 再次感謝所有提供幫助的人，我將表示敬意。 :)