本文介绍了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)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-28 04:39