如何以選項卡增長實現水平滾動條

Question

我需要實現導航選項卡。隨着標籤越來越多，我需要提供一個horizontal滾動條。

我的參考代碼：

http://code.ciphertrick.com/2015/05/04/browser-like-tabs-with-angularjs-and-bootstrap/ 

我已經實現了在上述網址相同。但是當標籤長度超過寬度時，我需要一個水平滾動條。目前它正在下面分開一行。

請幫忙。

Answer 1

編輯您的UL和添加兩種風格

display:flex; 
    white-space: nowrap; 

<ul class="nav nav-tabs" role="tablist" style="display:flex;white-space: nowrap;"> 

Answer 2

你必須使用一個固定的寬度和設置的CSS屬性溢出水平滾動。

.nav { 
    overflow-x: scroll; 
    width: 1500px; 
}