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

Question

我正在使用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上使用padding。这会导致我的链接没有应用样式类，因为Bootstrap只选择直接子节点。

我该怎么做才能让字幕大小保持一致，并使文字垂直居中呢？

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

- lunr

Answer 1

根据您当前使用的标记，这里提供了一种可能的CSS解决方案：

这里更新的示例

.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;
}

我所做的只是在锚元素周围包装一个标签，这仅用于垂直居中。不幸的是，这种方法需要在

元素上设置高度。为了确保此方法不会干扰任何其他CSS，请向父级添加一个类，.nav-tabs，指示

元素包含2行文本.. 然后相应地调整CSS (示例)

"

- Josh Crozier

---

你实际上可以在锚点样式定义中设置固定高度，因此只需要额外添加2个CSS规则。 - kpentchev

Answer 2

快速而不完美（绝非理想）但您可以避免覆盖任何Bootstrap规则：

<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>

- ioseph

---

更好的解决方案是让文本按照正常方式溢出，然后分别设置每个 li 和 a 的高度。 - ioseph

谢谢，但我也希望“主页”文本垂直居中。 - lunr

请参考http://jsfiddle.net/RLEdD/1/，使用在选项卡上设置显式高度的另一种解决方案。 - ioseph