bootstrap4將滾動條添加到div

Question

我在div中使用stacked pills。問題是，有時div包含很多藥片。我怎樣才能爲它添加一個滾動條？

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

我可以添加一個類的div使堆疊丸可滾動嗎？

Answer 1

是的，是否有可能， 只需添加類如anyclass 並給出一些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>