Navbar中文本上方/上方/上方的图标？ （Bootstrap 3）

Question

我花了一些时间寻找一种方法来做到这一点＆amp;尝试了几个（接近）的例子没有成功。

Example here

我基本上试图将小安卓图标置于＆＃34; Sub＃＆＃34; subnav中的文字。任何帮助，将不胜感激。代码区域是：

         <span class="">
         <span>Sub1</span>
         <i class="fa fa-android fa-lg"></i>
         </span>

Answer 1

您应该将col-xs-2中的每个图标都包裹在第一个col-xs-offset-1中div以使其居中。您可以使用<br>标记在图标和文字之间创建换行符。

JSFiddle Demo

<div class="col-xs-offset-1 col-xs-2">
    <i class="fa fa-android fa-lg"></i><br>
    Sub1
</div>
<div class="col-xs-2">
    <i class="fa fa-android fa-lg"></i><br>
    Sub2
</div>
<div class="col-xs-2">
    <i class="fa fa-android fa-lg"></i><br>
    Sub3
</div>
<div class="col-xs-2">
    <i class="fa fa-android fa-lg"></i><br>
    Sub4
</div>
<div class="col-xs-2">
    <i class="fa fa-android fa-lg"></i><br>
    Sub5
</div>

在您的原始代码中，您有一堆额外的<span> s我不确定它们的用途是什么。我删除了那些。

Answer 2

对我有用的是图标后面的简单br标签和＆＃34; text-align：center＆＃34;在＆＃34; ul li a＆＃34;。 HTML：

<li><a href="#"><i class="fa fa-home"></i><br>Home page</a></li>

CSS：

ul li a {
    text-align: center;
}

Answer 3

这些方面的东西？

<span>Sub1</span>
  <span style='position:absolute;left:50%'>
    <span style='border:1px solid red;margin-left:-100%;'>
      <i class="fa fa-android fa-lg"></i>
    </span>
  </span>
</span>