ブートストラップ4ドロップダウンスクロール可能

Question

小さいデバイスでドロップダウンメニューに問題があります。私はを使用する場合それも働いていない重要！私は（：：オート/オーバーフロー - yのをスクロールすることがオーバーフローである）私はここで解決策を試したとき、それはできスクロールすることはできません。私がスクロールできるのは、ドロップダウンが開いていても私のメインページでした。

<nav class="navbar navbar-toggleable-sm "> 
    <button class="navbar-toggler navbar-toggler-right main-navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav-collapse" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="fa fa-bars"></span> 
    </button> 
    <a class="navbar-brand animation" data-animation ="fadeInLeft" href="#"><img src="/093017/img/logo-tmi.png" alt="logo"/></a> 
    <div class="collapse navbar-collapse" id = "main-nav-collapse" > 
     <ul class="nav navbar-nav navbar-main mr-auto mt-2 mt-md-0 animation" data-animation = "fadeInRight"> 
      <li class="nav-item dropdown"> 
       <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Vehicles</a> 
       <div class="dropdown-menu default-menu main-menu sm-main-menu animation" data-animation = "fadeIn"> 
        <!-- Nav tabs --> 
        <div class="sm-main-nav" > 
         <a class="dropdown-item" href="#">Cars</a><hr> 
         <a class="dropdown-item" href="#">Vans & Pickup</a><hr> 
         <a class="dropdown-item" href="#">SUVs & Crossover</a><hr> 
         <a class="dropdown-item" href="#">MPVs</a><hr> 
         <a class="dropdown-item" href="#">Hybrid</a><hr> 
         <a class="dropdown-item" href="#">Performance</a> 
        </div> 
       </div> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link " href="#">Owners</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Shop</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link " href="#">Promotions</a> 
      </li> 
     </ul> 
    </div> 

Answer 1

ちょうどあなたがあなたがドロップダウンリストのスクロールバーのカスタムクラスを使用することができ、あなたのCSSに

@media (max-width: 500px) { 
    .dropdown-menu{ 
      height:200px; 
      overflow-y:auto; 
     } 
    } 

Answer 2

を@media使用することができます。

<div class="sm-main-nav customClassForDropDown" > 
         <a class="dropdown-item" href="#">Cars</a><hr> 
         <a class="dropdown-item" href="#">Vans & Pickup</a><hr> 
         <a class="dropdown-item" href="#">SUVs & Crossover</a><hr> 
         <a class="dropdown-item" href="#">MPVs</a><hr> 
         <a class="dropdown-item" href="#">Hybrid</a><hr> 
         <a class="dropdown-item" href="#">Performance</a> 
</div> 

これはカスタムCSSクラスです。

.customClassForDropDown 
    { 
     height: 100px; 
     overflow-y: auto; 
    } 

このJSFIDDLE