实例http://jsbin.com/wupume/1/edit
HTML
<ul class="fa-ul nav nav-sidebar">
<li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li>
<li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li>
<li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li>
<li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li>
</ul>
根据this font-awesome example page,我们可以使用带有无序列表的图标,但是当我尝试使用锚链接<a href=#">
和.nav
类时,图标放置也不合适。
我想知道在没有编写自定义css的情况下是否有任何方法可以正确对齐。
答案 0 :(得分:1)
这是我想出的。似乎fa-ul
和nav nav-whatever
不合作。我从fa-ul
标记中删除了<ul>
,并添加到nav nav-pills nav-stacked
中以制作垂直列表。然后,我还从fa-li
标记中删除了<a>
,所有内容似乎都正确对齐:
<div class="container">
<ul class="nav nav-pills nav-stacked">
<li><a href="#"><i class="fa fa-check-square"></i> List icons</a></li>
<li><a href="#"><i class="fa fa-check-square"></i> List icons</a></li>
<li><a href="#"><i class="fa fa-check-square"></i> List icons</a></li>
<li><a href="#"><i class="fa fa-check-square"></i> List icons</a></li>
</ul>
</div>
和Bootply:
希望有所帮助!
答案 1 :(得分:0)
更简单的解决方案是使用fixed width类fa-fw
而不是fa-ul
和fa-li
。
因此HTML标记将成为:
<ul class="nav nav-sidebar">
<li><a href="#"><i class="fa-fw fa fa-check-square"></i>List icons</a></li>
<li><a href="#"><i class="fa-fw fa fa-check-square"></i>List icons</a></li>
<li><a href="#"><i class="fa-fw fa fa-check-square"></i>List icons</a></li>
<li><a href="#"><i class="fa-fw fa fa-check-square"></i>List icons</a></li>
</ul>
实例:jsbin
答案 2 :(得分:-1)
删除导航
<ul class="fa-ul nav-sidebar">
<li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li>
<li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li>
<li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li>
<li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li>
</ul>