부트 스트랩 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