我有一个使用 Bootstrap 3 的网站。在该网站中，我有一个下拉菜单。菜单中的每个元素都由一个图标和一个名称组成。我的挑战是，我的图标布局不正确。图标不在一条线上，文本也不在一条线上。它看起来脱节。我的 HTML 看起来像这样:
<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>
我做错了什么？我需要做什么才能使我的图标和文本对齐？
最佳答案
您需要添加类fa-fw 来设置固定宽度的图标。
<ul class="dropdown-menu" role="menu">
<li><a target="_blank" href="/User/Create"><i class="fa fa-fw fa-user-plus"></i> Add User</a></li>
<li><a target="_blank" href="/User/Edit"><i class="fa fa-fw fa-user"></i> 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> Building</a></li>
</ul>
文档:http://fortawesome.github.io/Font-Awesome/examples/#fixed-width
关于css - 在 Bootstrap 中对齐图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28675772/