如何创建其标签具有不同字体大小的Bootstrap 3导航标签？

Question

以下是JSBIN的示例：http://jsbin.com/UFoRIYex/731/edit

我几乎逐字地从文档中提取了这个示例：http://getbootstrap.com/javascript/#tabs

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li class="pull-right smaller-text"><a href="#">Screwed Up Tab/Floats above</a></li>
</ul>   

我做的两个更改是拉右类，并添加一个较小的文本类，其定义简单如下：

.smaller-text {
  font-size: 10px;
}

具有不同字体大小的问题是它在较小尺寸的标签中创建了一个间隙：

我可以使用标签的行高选项来尝试使标签几乎相同的高度，但我不能让标签底部与下面的内容齐平。

提前致谢！

修改

根据下面的djbhindi的回答，我能够推断一个bootstrap3 /更少，非常通用。

我的CSS（在less / bootstrap中）看起来像这样：

  li.tab a {
   font-size: ceil((@font-size-base * 1.25));    
  }

  li.dropdown {
    position: relative;
    top: (ceil(((@line-height-computed * 1.25) - (floor(@font-size-small * @line-height-small) * 1.25))) + 1);

    a {
      line-height: @line-height-computed * 1.25; // fix the gap for the tabs & match with the normal tabs
    }
  }

各自的HTML看起来类似于：

<ul class="nav nav-tabs" style="position: relative;">
  <li class="tab active"><a href="#">Home</a></li>
  <li class="tab"><a href="#">Profile</a></li>
  <li class="tab pull-right dropdown"><a href="#"><small>Screwed Up Tab/Floats above</small></a></li>
</ul>

Answer 1

问题可能出在CSS文件中，它假设字体较大（你把它从大的东西改为10px吧？）。

所以你要做的就是调整可能是相对定位标签的东西;它会说：

position:relative;
top:20px;