Bootstrap菜单对齐

Question

我的菜单包含glypicons，其中一个作为下拉列表。我有一个对齐的问题。好像好像。

标记的JsFiddle如下：

http://jsfiddle.net/tn1dtwe8/1/

您可以在下面看到截图。 “安全”菜单似乎比其兄弟姐妹高很多。

代码：

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
<li>
  <a href="/Setup/Database">
    <span style="margin:5px" class="glyphicon glyphicon-hdd"></span>Setup Database
  </a>
</li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Security <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                  <li>
  <a href="/Security">
    <span style="margin:5px" class="glyphicon glyphicon-user"></span>Users
  </a>
</li>

                  <li class="active">
  <a href="javascript:void(0)">
    <span style="margin:5px" class="glyphicon glyphicon-eye-close"></span>Roles
  </a>
</li>

            </ul>
          </li>
<li>
  <a href="/Trades">
    <span style="margin:5px" class="glyphicon glyphicon-th"></span>Trades
  </a>
</li>
<li>
  <a href="/Licenses/Index">
    <span style="margin:5px" class="glyphicon glyphicon-barcode"></span>License
  </a>
</li>
    </ul>
</div>

Answer 1

其中一种可能的解决方案是在＆＃34; Sequrity＆＃34;之前添加类似风格的跨度。文本

<span style="margin:5px;display:block;"></span>

Answer 2

除了安全性之外，所有其他礼品都有图标按下，但是没有任何图标。用此添加图标将解决问题;

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-hdd" style="margin:5px"></span>Security <span class="caret"></span></a>

<强> Working Fiddle