Bootstrap4 thêm thanh cuộn vào div

Question

Tôi đang sử dụng stacked pills bên trong một div. Vấn đề là, đôi khi các div chứa rất nhiều thuốc. Làm thế nào tôi có thể thêm một thanh cuộn cho nó?

<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> 

Tôi có thể thêm lớp cho div để làm cho thuốc xếp chồng có thể cuộn được không?

Answer 1

Có, Có thể, Chỉ cần thêm một lớp như anyclass và cung cấp một số kiểu CSS. 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>