0

我有一个使用字体真棒图标的堆叠引导导航栏。我想将图标放置在每个导航栏链接上方而不是左侧。我找到了一个 wordpress 主题，它可以完成我想要完成的工作，并在此处包含一个链接：

wordpress 主题与导航栏中的图标

这是我目前拥有的代码，非常直接的引导堆叠导航。

<section class="row-fluid">
    <nav class="span2">
        <ul class="side-nav nav nav-pills nav-stacked">
          <li><a href="#"><i class="icon-large icon-home"></i> Dashboard</a></li>
          <li><a href="#"><i class="icon-large icon-key"></i> Licenses</a></li>
          <li><a href="#"><i class="icon-large icon-download-alt"></i> Downloads</a></li> 
          <li><a href="#"><i class="icon-large icon-question-sign"></i> Get help</a></li>
        </ul>
    </nav>
4

1 回答 1

2

这取决于您是希望药片堆叠还是并排放置。您可以在这个工作的 JSFiddle中看到这两个选项。

堆叠的 HTML：

<section class="row-fluid">
    <nav class="span2">
        <ul class="side-nav nav nav-pills nav-stacked">
            <li><a href="#"><i class="icon-large icon-home"></i><br> <div class="wrd">Dashboard</div></a></li>
          <li><a href="#"><i class="icon-large icon-key"></i><br> <div class="wrd">Licenses</div></a></li>
          <li><a href="#"><i class="icon-large icon-download-alt"></i><br> <div class="wrd">Downloads</div></a></li> 
          <li><a href="#"><i class="icon-large icon-question-sign"></i><br> <div class="wrd">Get help</div></a></li>
        </ul>
    </nav>
</section>

并排：

<section class="row-fluid">
    <nav class="span2">
        <ul class="nav nav-pills">
            <li><a href="#"><i class="icon-large icon-home"></i><br> <div class="wrd">Dashboard</div></a></li>
          <li><a href="#"><i class="icon-large icon-key"></i><br> <div class="wrd">Licenses</div></a></li>
          <li><a href="#"><i class="icon-large icon-download-alt"></i><br> <div class="wrd">Downloads</div></a></li> 
          <li><a href="#"><i class="icon-large icon-question-sign"></i><br> <div class="wrd">Get help</div></a></li>
        </ul>
    </nav>
</section>

本质上，您只需覆盖一两个默认CSS 规则：

li {
    text-align: center;
}
.icon-large {
    font-size: 14pt;
}
.wrd {
    padding-top: 5px !important;
}
于 2013-07-16T14:08:41.067 回答