在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中對齊圖標

回答

相關問題