html – 带有双线标题的Bootstrap 3选项卡

概述我正在使用bootstrap 3来创建选项卡式视图.一些标签的标题很长,我使用换行符将它们显示在两行中,如下所示： <ul class="nav nav-tabs"> <li class="active"> <a href="" data-toggle="tab">Home</a> </li> <li> <a href="" data-togg 我正在使用bootstrap 3来创建选项卡式视图.一些标签的标题很长,我使用换行符将它们显示在两行中,如下所示：

<ul >    <li >        <a href="" data-toggle="tab">Home</a>     </li>    <li>      <a href="" data-toggle="tab">          <div >Long<br/>Title</div>        </a>     </li> </ul>

但问题是现在我的单线字幕更小.为了解决这个问题我试过：

>通过添加一个空行使它们成为两行.这有效,但我也希望文本垂直居中.
>将链接放在div中,并在div上使用填充.这使得类不会应用于我的链接,因为bootstrap只选择直接后代.

我该怎么做才能使字幕大小相同,并使文本垂直居中？

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

解决方法 鉴于您正在使用的当前标记,这里有一个可能的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)

总结

以上是内存溢出为你收集整理的html – 带有双线标题的Bootstrap 3选项卡全部内容，希望文章能够帮你解决html – 带有双线标题的Bootstrap 3选项卡所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。