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上使用填充。这使得类不会应用于我的链接，因为bootstrap只选择直接后代。

如何才能使字幕大小相同，并使文字垂直居中？

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

Answer 1

鉴于您正在使用的当前标记，这里有一个可能的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 (example)

Answer 2

快速和脏（绝对不理想），但你要避免覆盖任何引导规则：

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

Bootstrap 3选项卡，带有两个标题

2 个答案: