小型デバイスのブートストラップドロップダウンメニュー

Question

navbarにドロップダウンリスト（15-20アイテム）があります。すべてのドロップダウンアイテムは携帯電話では表示されません。

は私がbootstrap.cssの内側に以下試してみました：。

.navbar-collapse.in { 
     overflow-y: visible; 
     overflow-y: auto;   
    } 

それは働いていない（ブートストラップv3.0.3）を

HTML：

 <div class="navbar navbar-default" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button>       
       </div> 
       <div class="navbar-collapse collapse" id="templatemo-nav-bar">       
        <div class="navbar-left" style="width: 98%; float: left;">        
         <ul class="nav navbar-nav navbar-right" id="dropdownState">         
          <li class="dropdown" style="margin-top: 4px; background-color: #5e8fed; color: #fff; border-top: 1px solid #02215b; border-bottom: 1px solid #02215b;">          
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-university" aria-hidden="true"></i>&nbsp;StateName <span class="caret"></span></a> 
           <ul class="dropdown-menu"> 
            //loop here 
            <li><a data-id="@item.Value" class="lnkChangeState" href="javascript:;"><i class="fa fa-check" aria-hidden="true"></i>&nbsp;@item.Text</a></li> 
           </ul> 
          </li> 
         </ul> 
        </div> 
       </div>     
      </div>    
     </div>   
    </div> 

小さなデバイスでも同様に動作させるにはどうすればよいですか？

ありがとうございました

Answer 1

私の回答は更新中です！実際のコードを確認するのに役立ちました。

メニューのドロップダウン位置が固定されており、オーバーフローが隠されているため、画面の余裕が必要な場合はメニュー全体が表示されません。

あなたは次の属性で、このクラスを更新する必要があります。

.navbar-collapse.in { 
overflow: scroll; 

}

と、これらの属性を呼び出すことはありません。

max-height: none !important; 
height: auto !important; 

これは、ドロップダウンメニューをスクロール可能になります。必要に応じてメディア照会で高さを調整しますが、現在は機能します。

Answer 2

私はそれを働かせるようにしました。次のスタイルを変更します。

.navbar-collapse.in { 
    overflow: hidden; 
    max-height: none !important; 
    height: auto !important; 
} 

.navbar-collapse.in { 
    /* overflow: hidden; */ 
    /* max-height: none !important; */ 
    height: auto !important; 
} 

へ