如何使標籤不會溢出標籤容器？

Question

當我添加標籤超過標籤容器的寬度，他們去了，我希望它水平左右滾動，但不喜歡這個例子：http://www.eyecon.ro/bootstrap-tabdrop/ 和thnx。

Answer 1

直接的javascript：

this.$('.nav-tabs').tabdrop(); 

使用

調用tabdrop：

.tabdrop(); 

呼叫與選項tabdrop：

.tabdrop(options); 

選項 文字

類型：字符串

默認值：圖標

<i class="icon-align-justify"></i> 

要更改默認值，initalizing的tabdrop時調用

.tabdrop({text: "your text here"}); 

。從下拉列表中選擇標籤後，顯示的值將會改變。 的offsetTop

類型：整數

默認值：0

要更改默認值，調用

.tabdrop({offsetTop: N}); 

initalizing的tabdrop時。這決定了標籤必須包含在下拉菜單中。 方法 佈局

檢查是否標籤全部裝入一行並顯示活動選項卡的列表中的文本：

.tabdrop('layout'); 

Answer 2

有一些解決方案在那裏，如果你谷歌「滾動引導標籤」。另外，您也可以在兩個div包住標籤如下：

<div class="wrapper"> 
    <div class="scrollable"> 
    <ul class="nav nav-tabs" role="tablist"> 
     <li class="active"><a href="#tab_a" role="tab" data-toggle="tab">Tab A</a></li> 
     <li><a href="#tab_b" role="tab" data-toggle="tab">Tab B</a></li> 
     <li><a href="#tab_c" role="tab" data-toggle="tab">Tab C</a></li> 
     <li><a href="#tab_d" role="tab" data-toggle="tab">Tab D</a></li> 
     <li><a href="#tab_e" role="tab" data-toggle="tab">Tab E</a></li> 
     <li><a href="#tab_f" role="tab" data-toggle="tab">Tab F</a></li> 
     <li><a href="#tab_g" role="tab" data-toggle="tab">Tab G</a></li> 
     <li><a href="#tab_h" role="tab" data-toggle="tab">Tab H</a></li> 
    </ul> 
    </div> 
</div> 

然後添加以下CSS：

.scrollable { 
    width: 600px; 
} 

.wrapper { 
    width: 400px; 
    overflow-x: scroll; 
} 

由於這是相當快的和骯髒的，你可能會想添加更多的jQuery和CSS來代替滾動條，左右滾動標籤的按鈕，並確保兩個DIV的寬度不是硬編碼的。