ブートストラップnav-stackedクラスが非常に小さな画面に間違った表示をしています

Question

私はフラスコでブートストラップを使ってWebアプリケーションを構築しています。次のように私のコードは次のとおりです。

<div class="container col-xs-12"> 
    <div class="jumbotron" style="background:url({{ url_for('static', filename='jumbotron-grass-bw.png') }}); 
            background-size:cover;"> 
     <h2><strong>Even we are ordinary, we can live better!</strong></h2> 
     <p style="color:#333333">I make PERSONAL server by which we can share information without control from those "big" and reach the real FREEDOM.</p> 
     <p>&nbsp;</p> 
    </div> 


    <ul class="nav nav-pills nav-stacked col-xs-2"> 
     <li class="active"><a href="#tab1" data-toggle="tab">Personal</a></li> 
     <li><a href="#tab2 " data-toggle="tab">Circle1</a></li> 
     <li><a href="#tab3" data-toggle="tab">Circle2</a></li> 
     <li><a href="#tab4" data-toggle="tab">Circle3</a></li> 
    </ul> 

    <div class="tab-content col-xs-10"> 
     <div class="tab-pane active" id="tab1"> 
      <p>Tab 1 content goes here...abcdektessseedddddddddddddd here..ahaha!</p> 
     </div> 
     <div class="tab-pane" id="tab2"> 
      <p>Tab 2 content goes here...</p> 
     </div> 
     <div class="tab-pane" id="tab3"> 
      <p>Tab 3 content goes here...</p> 
     </div> 
     <div class="tab-pane" id="tab4"> 
      <p>Tab 4 content goes here...</p> 
     </div> 
    </div> 
</div> 

私は非常に小さな画面上の表示効果を検証するために、テストデバイスとしてIPHONE6を使用していますし、私は次のような結果を得る：

があります画面の解像度を上げても問題ありません。

だから、非常に小さな画面上のブートストラップの表示のためのバグが存在しているか、私は間違ってコーディングをしましたか？

ありがとうございます！

Answer 1

はさてあなたができるいくつかのものがあります。

1. はあなたのコードを調整します。 colの形成が正しいにもかかわらず、この特定のWebページの設計にあなたの最大の関心を向けるようには見えません。以前に行ったようにcol-xs-2ではなく、col-xs-2の代わりにcol-xs-4と言うと、タブメニューが少し広くなるように変更してみてください。このようにしてiPhone 6にリサイズすると、問題は解決されるはずです。サンプルコードは、ダウン以下である：

   <ul class="nav nav-pills nav-stacked col-xs-4"> 
       <li class="active"><a href="#tab1" data-toggle="tab">Personal</a></li> 
       <li><a href="#tab2 " data-toggle="tab">Circle1</a></li> 
       <li><a href="#tab3" data-toggle="tab">Circle2</a></li> 
       <li><a href="#tab4" data-toggle="tab">Circle3</a></li> 
   </ul> 
   
   <div class="tab-content col-xs-8"> 
       <div class="tab-pane active" id="tab1"> 
        <p>Tab 1 content goes here...abcdektessseedddddddddddddd here..ahaha!</p> 
       </div> 
       <div class="tab-pane" id="tab2"> 
        <p>Tab 2 content goes here...</p> 
       </div> 
       <div class="tab-pane" id="tab3"> 
        <p>Tab 3 content goes here...</p> 
       </div> 
       <div class="tab-pane" id="tab4"> 
        <p>Tab 4 content goes here...</p> 
       </div> 
   </div> 
   

2. あなたがしようとすると、それはより良いあなたに合ったので、あなたに必要な基準を満たしてきたまでは、再び比を変更することができ

   。

3. 使用メディアクエリ。それでも問題が解決しない場合は、モバイル版を好みのスタイルにするためにメディアクエリを使用してみてください。この方法で、コードの画面の幅と高さを指定できます。ここで

W3S Media Queriesは1

Solution regarding point 1