我在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添加一个类来使堆叠的药片可滚动吗?
答案 0 :(得分:39)
是的,有可能,
只需添加类似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>
答案 1 :(得分:1)
在包含元素的元素上使用overflow-y:scroll属性。
overflow-y属性指定在顶部和底部边缘溢出时是剪切内容,添加滚动条还是显示块级元素的溢出内容。
有时,将元素的高度放置在overflow-y属性旁边很有趣,如下例所示:
答案 2 :(得分:0)
<div class="overflow-auto p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
<strong>Column 0 </strong><br>
<strong>Column 1</strong><br>
<strong>Column 2</strong><br>
<strong>Column 3</strong><br>
<strong>Column 4</strong><br>
<strong>Column 5</strong><br>
<strong>Column 6</strong><br>
<strong>Column 7</strong><br>
<strong>Column 8</strong><br>
<strong>Column 9</strong><br>
<strong>Column 10</strong><br>
<strong>Column 11</strong><br>
<strong>Column 12</strong><br>
<strong>Column 13</strong><br>
</div>
</div>
答案 3 :(得分:0)
true
.Scroll {
height:600px;
overflow-y: scroll;
}