Question

我有一个使用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>

我做错了什么？我需要做些什么才能让我的图标和文字排成一行？

Answer 1

您需要添加班级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>

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

Answer 2

很难没有示例，但您可以尝试添加<li>元素的高度（例如60px），添加display:block，width:100%，height:100%和line-height与您在<li>元素上设置的高度相同（在我们的示例中为60px）

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

在Bootstrap中对齐图标

2 个答案: