Bootstrap 3帶雙線標題的選項卡

我使用引導程序3創建選項卡式視圖。一些標籤的標題很長，我用線打破了兩行這樣來顯示它們：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/

來源

2014-03-19 lunr

鑑於您在使用當前的標記，這裏是一個可能的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)

來源

2014-03-19 04:08:32

上設置一個明確的高度，您可以在錨定樣式定義中實際設置固定高度，從而只有2個額外的CSS規則，請參閱http://jsfiddle.net/RLEdD/1/。 – kpentchev

快速和骯髒的（絕對不是理想的），但你避免覆蓋任何引導的規則：

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

來源

2014-03-19 03:55:33 ioseph

更好的解決方案是將文本溢出爲正常，並且每個「li」，「height」都會相應地設置爲 – ioseph

Thx，但我也希望「Home」文本能夠垂直居中。 – lunr

通過在標籤 – ioseph

Bootstrap 3帶雙線標題的選項卡

回答

相關問題