Bootstrap3でTabメニューについて質問

Bootstrap3のタブメニューについて質問させてください。
現在、以下のコードのようにBootstrapを読ませ、HTMLを書いているのですが、ページの関係上、タブ数が多くなってしまいます。
タブ数が多くなると、パソコンではまだ見れない事はないのですが、スマホ等で見るとタブメニューが何段にもなって非常に見づらくなってしまいます。
そこで、スマホの時だけ、もしくは常時ドロップダウンメニューなどにし、スマートにしたいと思うのですが、どこをいじればいいかわからず、参考サイトもうまく見つけられておりません。
コードをどう弄るとドロップダウンになるか、お分かりになる方、もしくは参考サイトをご存知でしたら教えてください。
よろしくお願い致します。

html
1<ul class="nav nav-tabs">                    
2<li class="active"><a href="#1p" data-toggle="tab">A</a></li>
3<li><a href="#2p" data-toggle="tab">B</a></li>
4<li><a href="#3p" data-toggle="tab">C</a></li>
5・
6・
7・
8<li><a href="#12p" data-toggle="tab">L</a></li>
9</ul>
10
11<div class="tab-content">
12<div class="tab-pane fade in active"" id="1p"></div>                        
13<div class="tab-pane fade" id="2p"></div>
14<div class="tab-pane fade" id="3p"></div>
15・
16・
17・
18<div class="tab-pane fade" id="12p"></div>
19</div>