ブートストラップのNavbarのオーバーフローの修正

Question

私は動的にnavbarを設定し、項目の数は時々異なります。

アイテムがベースコンテナの幅を超えると、ナビゲーションバーは2行に分割されます。これが起こると、私はNavbarを以下に追加した画像のようにレンダリングします。

それは矢印は左端と右端に配置されている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>

`

Answer 1

私の方法は、スクロールを使用しているが、私はあなたがマウスを使用したい場合は、このexamples

で始めることができると思いますそのスクロールをドラッグすると約を検索することができますのようなthis