Bootstrap4向div添加滚动条
Bootstrap4向div添加滚动条
提问于 2016-10-18 15:43:51
我在一个堆叠丸中使用div。问题是，有时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添加一个类来使堆叠的药丸滚动吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-11-03 06:35:25
是的，这是可能的，只需添加一个类，如anyclass，并提供一些CSS风格。活着
.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>
Stack Overflow用户
发布于 2018-11-18 02:26:47
在包含元素的元素上使用overflow-y: scroll属性。
overflow-y属性指定当块级元素在顶部和底部边缘溢出时，是否要裁剪内容、添加滚动条或显示溢出内容。
有时，在overflow属性旁边放置元素的高度很有趣，如下例所示：
<ul class="nav nav-pills nav-stacked" style="height: 250px; overflow-y: scroll;">
<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>Stack Overflow用户
发布于 2020-09-26 11:37:05
.Scroll {
height:600px;
overflow-y: scroll;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
</script>
</head>
<body>
<h1>Smooth Scroll</h1>
<div class="Scroll">
<div class="main" id="section1">
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
<div class="main" id="section2">
<h2>Section 2</h2>
<p>Knowing how to write a paragraph is incredibly important. It’s a basic aspect of writing, and it is something that everyone should know how to do. There is a specific structure that you have to follow when you’re writing a paragraph. This structure helps make it easier for the reader to understand what is going on. Through writing good paragraphs, a person can communicate a lot better through their writing.</p>
</div>
<div class="main" id="section3">
<h2>Section 3</h2>
<p>Knowing how to write a paragraph is incredibly important. It’s a basic aspect of writing, and it is something that everyone should know how to do. There is a specific structure that you have to follow when you’re writing a paragraph. This structure helps make it easier for the reader to understand what is going on. Through writing good paragraphs, a person can communicate a lot better through their writing.</p>
</div>
<div class="main" id="section4">
<h2>Section 4</h2>
<p>Knowing how to write a paragraph is incredibly important. It’s a basic aspect of writing, and it is something that everyone should know how to do. There is a specific structure that you have to follow when you’re writing a paragraph. This structure helps make it easier for the reader to understand what is going on. Through writing good paragraphs, a person can communicate a lot better through their writing.</p>
</div>
<div class="main" id="section5">
<h2>Section 5</h2>
<a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>
<div class="main" id="section6">
<h2>Section 6</h2>
<p>Knowing how to write a paragraph is incredibly important. It’s a basic aspect of writing, and it is something that everyone should know how to do. There is a specific structure that you have to follow when you’re writing a paragraph. This structure helps make it easier for the reader to understand what is going on. Through writing good paragraphs, a person can communicate a lot better through their writing.</p>
</div>
<div class="main" id="section7">
<h2>Section 7</h2>
<a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40112618
复制相关文章
相似问题
腾讯云开发者
