引导程序 3:滚动条
Bootstrap 3: Scroll bars
我正在使用 Bootstrap 3,并在侧边导航中有一个主题列表。侧边导航很长,我想让它在侧边导航内部有一个滚动条,在必须向下滚动之前显示 8 个元素。
这是我下面的代码:
<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-->
您需要使用如下所示的溢出选项:
.nav{
max-height: 300px;
overflow-y: scroll;
}
根据需要显示的项目数量更改高度
您需要使用溢出选项,但使用以下参数:
.nav {
max-height:300px;
overflow-y:auto;
}
使用 overflow-y:auto;因此,仅当内容超过最大高度时,才会显示滚动条。
如果使用 overflow-y:scroll,则滚动条将始终可见 - 在所有 .nav 上 - 无论内容是否超过最大高度。
大概你想要一些适应内容的东西,而不是相反的东西。
希望对您有所帮助
相关文章:
- 如何平滑地设置twitter引导程序进度条的动画
- 具有Twitter引导程序的水平滚动表
- 如何增加引导程序进度条
- 滚动条在关闭引导对话框后消失
- 试图让我的引导程序navabar背景淡出滚动在我的wordpress主题
- 如何使用引导程序创建自定义滚动条
- 如何制作在向下滚动时更改大小的引导程序标头
- 在引导程序中向下滚动时,菜单不显示
- 使用Twitter引导程序's Scrollspy到延迟加载(滚动加载)异步JavaScript
- angularjs/signalR引导程序条未随控制器更改而更新
- 将引导程序下拉选择滚动条居中到所选项目
- 在javascript中添加引导程序进度条类
- 在没有动画的情况下将进度条重置为零(在引导程序中)
- 引导程序导航栏未使用平滑滚动脚本折叠
- 使滚动导航栏在引导程序中的浏览器顶部停留
- 在引导程序 3 词缀/滚动件上方添加不确定的空格
- 弹出窗口中的溢出滚动条不起作用(引导)
- 引导程序 3:滚动条
- Twitter引导程序下拉列表创建了一个滚动条
- 添加滚动条引导标记字段自动完成