Bootstrap4

Question

için kaydırma çubuğu ekleniyor stacked pills'u div içinde kullanıyorum. Sorun şu ki, bazen div çok fazla hap içeriyor. Bunun için bir kaydırma çubuğu nasıl ekleyebilirim?

<div class="row col-md-2"> 
<ul class="nav nav-pills nav-stacked"> 
    <li class="nav-item"> 
    <a class="nav-link active" href="#">Active</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="#">Link</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="#">Link</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link disabled" href="#">Disabled</a> 
    </li> 
</ul> 
</div> 

Yığınlandırılmış hapları kaydırılabilir yapmak için div için bir sınıf ekleyebilir miyim?

Answer 1

Evet, Mümkün mü Sadece anyclass gibi bir sınıf ekleyin ve biraz CSS stili verin. Live

.anyClass { 
    height:150px; 
    overflow-y: scroll; 
} 

.anyClass { 
 
    height:150px; 
 
    overflow-y: scroll; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class=" col-md-2"> 
 
    <ul class="nav nav-pills nav-stacked anyClass"> 
 
    <li class="nav-item"> 
 
     <a class="nav-link active" href="#">Active</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#">Link</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#">Link</a> 
 
    </li><li class="nav-item"> 
 
     <a class="nav-link" href="#">Link</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#">Link</a> 
 
    </li><li class="nav-item"> 
 
     <a class="nav-link" href="#">Link</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#">Link</a> 
 
    </li><li class="nav-item"> 
 
     <a class="nav-link" href="#">Link</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#">Link</a> 
 
    </li><li class="nav-item"> 
 
     <a class="nav-link" href="#">Link</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#">Link</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link disabled" href="#">Disabled</a> 
 
    </li> 
 
    </ul> 
 
</div>