Navbar中文本上方/上方/上方的图标？ （Bootstrap 3） [英] Centered icons above / over / on top of text in Navbar? (Bootstrap 3)

问题描述

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

I spent some time searching for a way to do this & tried a couple (close) examples without success.

此处示例

Example here

我基本上试图将小的android图标置于subnav中Sub＃文本的中心。任何帮助，将不胜感激。代码区域为：

I'm basically trying to put the little android icons centered above the "Sub#" text in the subnav. Any help would be appreciated. The area of the code is:

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

推荐答案

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

You should wrap each of icons in col-xs-2 with a col-xs-offset-1 in the first div to make it centered. You can use <br> tags to create a line break between your icon and your text.

<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我不确定这些服务的目的是什么。我删除了那些。

In your original code you have a bunch of extra <span>s I am not sure what purpose those are serving. I removed those.

这篇关于Navbar中文本上方/上方/上方的图标？ （Bootstrap 3）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！