带有两行标题的 Bootstrap 3 选项卡答案

【问题标题】：Bootstrap 3 tabs with two-liner titles带有两行标题的 Bootstrap 3 选项卡
【发布时间】：2014-04-25 02:32:11
【问题描述】：

我正在使用 bootstrap 3 创建一个选项卡式视图。一些选项卡的标题很长，我使用换行符将它们显示在两行中，如下所示：

 <ul class="nav nav-tabs">
    <li class="active">
        <a href="" data-toggle="tab">Home</a>
     </li>
    <li>
      <a href="" data-toggle="tab">
          <div class="text-center">Long<br/>Title</div>
        </a>
     </li>
 </ul>

但问题是现在我的单行字幕变小了。为了解决这个问题，我尝试了：

也可以通过放置一个空行来使它们变成两行。这可行，但我也希望文本垂直居中。
将链接放在 div 中，并在 div 上使用填充。这使得类不适用于我的链接，因为引导程序只选择直接后代。

我可以做些什么来使标题大小相同，并使里面的文本垂直居中？

这是一个 jsfiddle：http://jsfiddle.net/RLEdD/

【问题讨论】：

标签： html css tabs twitter-bootstrap-3

【解决方案1】：

快速而肮脏（绝对不理想），但您避免覆盖任何引导规则：

<ul class="nav nav-tabs">
   <li class="active">
       <a href="" data-toggle="tab">
         <div class="text-center">Home</div>
         <div class="text-center">&nbsp</div>
       </a>
    </li>
   <li>
     <a href="" data-toggle="tab">
         <div class="text-center">Long</div>
         <div class="text-center">Title</div>
       </a>
    </li>
</ul>

【讨论】：

更好的解决方案是让文本正常溢出，并相应设置每个li, a 高度
谢谢，但我也希望“主页”文本垂直居中。
查看jsfiddle.net/RLEdD/1，通过在选项卡上设置显式高度来获得另一种解决方案

【解决方案2】：

鉴于您当前使用的标记，这是一种可能的 CSS 解决方案：

UPDATED EXAMPLE HERE

.nav-tabs>li {
    height:62px;
}
.nav-tabs>li>a, .nav-tabs>li>a>div {
    height:100%;
    display:table;
}
.nav-tabs>li>a span {
    display:table-cell;
    vertical-align:middle;
}

我所做的只是将span 元素包裹在锚元素周围。这仅用于垂直居中。不幸的是，这种方法确实需要在li 元素上设置高度。为了确保此方法不会干扰任何其他 CSS，您可以向父级添加一个类 .nav-tabs，指示 li 元素包含 2 行文本..然后相应地调整 CSS @ 987654322@

【讨论】：

你实际上可以在锚样式定义中设置固定高度，因此只有2个额外的css规则。