2016-10-18 21 views
7

पर स्क्रॉलबार जोड़कर मैं div के अंदर उपयोग कर रहा हूं। समस्या यह है कि कभी-कभी div में बहुत सारी गोलियां होती हैं। मैं इसके लिए स्क्रॉलबार कैसे जोड़ सकता हूं?बूटस्ट्रैप 4

<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 जैसी कक्षा जोड़ें और कुछ सीएसएस शैली दें। 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>

संबंधित मुद्दे