修復引導程序導航欄溢出

我將會動態填充導航欄，並且項目數量會不同。修復引導程序導航欄溢出

當項目超過基本容器的寬度時，導航欄會分成兩行。當發生這種情況時，我想讓導航欄呈現出類似於我在下面添加的圖像。

這是Firefox的標題欄，其中的箭頭被放置在最左邊和最右邊的屏幕截圖，但我希望他們能夠在導航欄的右端一起顯示。

我在其他地方搜索了類似的實現，但無法找到一個。

代碼片段：

.nav-tabs > li > a { 
 
    background: #dbeef9; 
 
    border: 1px solid #add2e6; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul class="nav nav-tabs DefaultTab" id="main-tabs" role="tablist"> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab" id="li-menu-1"> 
 
     <span class="pull-left tick"></span>Item1 
 
    </a> 
 
    </li> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item2 
 
    </a> 
 
    </li> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item3 
 
    </a> 
 
    </li> 
 
    <li class="active"> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item4 
 
    </a> 
 
    </li> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item5 
 
    </a> 
 
    </li> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item6 
 
    </a> 
 
    </li> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item7 
 
    </a> 
 
    </li> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item8 
 
    </a> 
 
    </li> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item9 
 
    </a> 
 
    </li> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item10 
 
    </a> 
 
    </li> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item11 
 
    </a> 
 
    </li> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item12 
 
    </a> 
 
    </li> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item12 
 
    </a> 
 
    </li> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item12 
 
    </a> 
 
    </li> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item12 
 
    </a> 
 
    </li> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item12 
 
    </a> 
 
    </li> 
 
    <li class=""> 
 
    <a href="#" role="tab" data-toggle="tab"> 
 
     <span class="pull-left tick"></span>Item12 
 
    </a> 
 
    </li> 
 
</ul>

來源

2017-07-28 RandomUser

請過帳一些代碼。 – gwar9

@ gwar9更新了我的問題 – RandomUser

你能試着畫出你到底想做什麼嗎？我無法弄清楚你想用這個來自Firefox的圖像。 –

使用滾動我的方式，但我認爲你可以用這個examples

開始如果你想使用鼠標拖動滾動條，你可以搜索dragscroll like this

來源

2017-07-31 09:07:49

修復引導程序導航欄溢出

回答

相關問題