Html Bootstrap 3：滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18964833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3: Scroll bars
提问by Aidan
I am using Bootstrap 3 and have a list of subjects inside a side nav. The sidenav is long and I would like to make it that there is a scrollbar inside of the sidenav that displays 8 elements before having to scroll down.
我正在使用 Bootstrap 3 并在侧面导航中有一个主题列表。sidenav 很长，我想让 sidenav 内部有一个滚动条，在必须向下滚动之前显示 8 个元素。
Here is my code below:
这是我的代码如下：
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation" style="float:left">
<div class="well sidebar-nav">
<ul class="nav">
<li><strong>Select a subject</strong></li>
<li class="active"><a href="#">Maths</a></li>
<li><a href="#">English</a></li>
<li><a href="#">Art and Design</a></li>
<li><a href="#">Drama</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Physics</a></li>
<li><a href="#">Chemistry</a></li>
<li><a href="#">Biology</a></li>
<li><a href="#">Home economics</a></li>
<li><a href="#">Physical Education</a></li>
<li><a href="#">Computing Science</a></li>
<li><a href="#">French</a></li>
<li><a href="#">German</a></li>
<li><a href="#">Mandarin</a></li>
<li><a href="#">Religious Education</a></li>
<li><a href="#">Modern Studies</a></li>
<li><a href="#">Geography</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Creative computing</a></li>
<li><a href="#">Craft, Design and Technology</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
</div><!--/row-->
回答by Amir Hoseinian
You need to use overflow option like below:
您需要使用如下溢出选项：
.nav{
max-height: 300px;
overflow-y: scroll;
}
Change the height according to amount of items you need to show
根据您需要显示的项目数量更改高度
回答by EdsonF
You need to use the overflow option, but with the following parameters:
您需要使用溢出选项，但使用以下参数：
.nav {
max-height:300px;
overflow-y:auto;
}
Use overflow-y:auto;so the scrollbar only appears when the content exceeds the maximum height.
使用溢出-y:auto; 所以滚动条只有在内容超过最大高度时才会出现。
If you use overflow-y:scroll, the scrollbar will always be visible - on all .nav - regardless if the content exceeds the maximum heigh or not.
如果您使用 overflow-y:scroll，滚动条将始终可见 - 在所有 .nav 上 - 无论内容是否超过最大高度。
Presumably you want something that adapts itself to the content rather then the the opposite.
大概你想要一些能够适应内容而不是相反的东西。
Hope it may helpful
希望它会有所帮助
