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

但是，字形未对齐在同一行上。我怎样才能让它与“名字”在同一行？

Answer 1

您使用的是什么版本的 Bootstrap ？新版本 3.3.1 工作正常，这里是工作 fiddle

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>