带有两行标题的 Bootstrap 3 选项卡 [英] Bootstrap 3 tabs with two-liner titles

问题描述

我正在使用引导程序 3 创建选项卡式视图.某些选项卡的标题很长，我使用换行符将它们显示为两行，如下所示:

I am using bootstrap 3 to create a tabbed view. Titles of some of the tabs are long and i used line breaks to display them in two lines like this:

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

但问题是现在我的单行字幕变小了.为了解决这个问题，我试过:

But the problem is now my one-liner captions are smaller. To fix this i tried:

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

我该怎么做才能使字幕大小相同，并且使里面的文本垂直居中?

What can i do to make the captions same size and also vertically center the text inside?

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

Here is a jsfiddle: http://jsfiddle.net/RLEdD/

推荐答案

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

Given the current markup you're using, here is one possible CSS solution:

此处更新示例

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

All I did was wrap a span element around the anchor elements. This is just used for vertical centering. Unfortunately, this method does require that a height is set on the li elements. In order to ensure that this method doesn't interfere with any other CSS, you could add a class to the parent, .nav-tabs, indicating that the li elements contain 2 lines of text.. then just tweak the CSS accordingly (example)

这篇关于带有两行标题的 Bootstrap 3 选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！