css - 如何创建其标签具有不同字体大小的 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;
}

具有不同字体大小的问题是，它会在较小尺寸的选项卡中产生间隙:

我可以使用选项卡的 line-height 选项来尝试使选项卡的高度几乎相同，但我无法完全让选项卡底部与下面的内容齐平。

提前致谢!

编辑

我能够根据下面 djbhindi 的回答推断出 bootstrap3/less，非常通用。

我的 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;