ブートストラップのタブが小さいデバイスでオーバーラップしています

Question

私はブートストラップのテーマを使用しており、残りのレイアウトではほとんど問題なく動作しています。しかし、タブは小さな画面には見えません。 ソース：

そして大きな/通常画面での出力：

は、次に小さな画面での出力は次のようになります：私はあちこちに固有の追加JSを持っていない

タブ。

誰かがリジッド方向を与えることができますか？

ところで、私はCSSのものとブートストラップにはちょうどbiginnerです。

Answer 1

ブートストラップが提供する応答ユーティリティを見ると、画面サイズに基づいて要素を表示/非表示にすることができます。

http://getbootstrap.com/css/#responsive-utilities

<ul class="nav nav-tabs hidden-xs"> 
    <li role="presentation" class="active"><a href="#">Home</a></li> 
    <li role="presentation"><a href="#">Profile</a></li> 
    <li role="presentation"><a href="#">Messages</a></li> 
</ul> 
<ul class="nav nav-pills nav-stacked visible-xs-block"> 
    <li role="presentation" class="active"><a href="#">Home</a></li> 
    <li role="presentation"><a href="#">Profile</a></li> 
    <li role="presentation"><a href="#">Messages</a></li> 
</ul> 

あなたはこれをテストするためにhttp://www.bootply.com/new#を使用することができます（アクションでそれを見るために、狭い幅に、ブラウザのサイズを変更し、その後、上記のコードをコピーして貼り付け、それを実行します。）

さまざまなサイズのページで特定のものがどのように表示されるかを再考する必要があるかもしれませんが、画面サイズに応じて異なる要素を表示する必要がある場合には、いくつかのツールが必要になります（応答します）。