2016-10-18 6 views
7

divの中にstacked pillsを使用しています。問題は、時にはdivに多くの丸薬が含まれていることです。どのようにスクロールバーを追加できますか?ブートストラップ4 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のクラスを追加することはできますか?

答えて

3

はい、可能ですか? 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>

関連する問題