全寬選項卡，每個選項卡都有足夠的空間

我在我的視圖中有bootstraptabs表示星期幾。選項卡會根據選項卡中的內容佔用寬度，並且不佔用頁面中的完整width。全寬選項卡，每個選項卡都有足夠的空間

enter image description here

我的要求是全寬度的標籤。我搜索了它，發現了幾個答案，但所有這些都給每個標籤（Full width tabs using Bootstrap (Support IE)）等寬。答案是好的，但在我的情況下，一個標籤沒有獲得足夠的空間，因此內容被分成兩行（7月16日星期三）。

enter image description here

因此，如何建立全寬度的標籤有足夠的空間給每個標籤？「今日」選項卡具有可用空間，可將空間提供給其他選項卡。

編輯............................................ .........................................

使用bootstrap 2.3.2

來源

2014-07-11 user1690588

可能是你可以先用免費的寬度。比得到最大的寬度來應用它們全部。不是一個好的解決方案，而是一個黑客。 –

我無法給任何選項卡提供硬編碼寬度。爲了使其響應，我只需要使用'％'。 – user1690588

如果是bootstrap，則應該可以使用nav-justified類。

http://getbootstrap.com/components/#nav-justified

nav-justified

來源

2014-07-11 07:07:48 parchment

我忘了提及我正在使用bootstrap 2.3.2，並且沒有'nav-justified'類。因此，我下載了最新的引導程序並複製粘貼'nav-justified''css到我的自定義css和賓果遊戲。謝謝..，。 – user1690588

試試這個：

<ul class="nav nav-tabs"> 
    <li><a href="#home" data-toggle="tab">Home</a></li> 
    <li><a href="#profile" data-toggle="tab">Profile</a></li> 
    <li class="extraWidth"><a href="#messages" data-toggle="tab">Messagesssssss</a></li> 
    <li><a href="#settings" data-toggle="tab">Settings</a></li> 
</ul> 

<style type="text/css"> 
.nav-tabs li { 
    width: 24%; 
} 
.extraWidth { 
    width: 28%; 
} 
</style>

你應該較大tab提供所有和寬度的增加的百分比寬度的一定百分比。確保總寬度百分比應該是100％。

來源

2014-07-11 06:34:21 user1791574

看到這個小提琴http://jsfiddle.net/ZdU8j/ 的主要性能display: table-cell和width: 1%

來源

2014-07-11 07:08:25 user3056262

全寬選項卡，每個選項卡都有足夠的空間

回答

相關問題