在Bootstrap中对齐图标

我有一个使用Bootstrap 3的网站。在该网站中，我有一个下拉菜单。菜单中的每个项目都包含一个图标和一个名称。我的挑战是，我的图标没有正确布置。图标不符合，文字不符合。它看起来脱节。我的HTML看起来像这样：在Bootstrap中对齐图标

<ul class="dropdown-menu" role="menu"> 
    <li><a target="_blank" href="/User/Create"><span class="fa fa-user-plus" style="margin-right: 10px;"></span>Add User</a></li> 
    <li><a target="_blank" href="/User/Edit"><span class="fa fa-user" style="margin-right: 10px;"></span>Edit User</a></li> 
    <li><a target="_blank" href="/User/Delete"><span class="fa fa-user-times" style="margin-right: 10px;"></span>Delete User</a></li> 
    <li><a target="_blank" href="/Buiding/Add"><span class="fa fa-building" style="margin-right: 10px;"></span>Building</a></li> 
</ul>

我在做什么错？我需要做些什么才能让我的图标和文字排列起来？

来源

2015-02-23 JQuery Mobile

不能说没有演示，或至少一个截图。我最好的猜测是由于水平空间不足导致文字环绕。 – isherwood 2015-02-23 14:20:38

硬盘没有一个例子，但东西，你可以尝试是增加的高度与<li>元素（例如60像素），加入display:block，width:100%，height:100%和line-height一样你设置在<li>元素上的高度（在我们的例子中为60px）

尝试，这可以帮助你一点。

来源

2015-02-23 14:25:14 Nick

您需要添加类fa-fw来设置固定宽度的图标。

<ul class="dropdown-menu" role="menu"> 
    <li><a target="_blank" href="/User/Create"><i class="fa fa-fw fa-user-plus"></i>&nbsp; Add User</a></li> 
    <li><a target="_blank" href="/User/Edit"><i class="fa fa-fw fa-user"></i>&nbsp; Edit User</a></li> 
    <li><a target="_blank" href="/User/Delete"><i class="fa fa-fw fa-user-times"></i>Delete User</a></li> 
    <li><a target="_blank" href="/Buiding/Add"><i class="fa fa-fw fa-building"></i>&nbsp; Building</a></li> 
</ul>

文件：http://fortawesome.github.io/Font-Awesome/examples/#fixed-width

来源

2015-02-23 14:23:48 WonkierSteam9

在Bootstrap中对齐图标

回答

相关问题