实现方法:1、利用“<div class="pre-scrollable">”排版类实现滚动条;2、利用“
”实现滚动条。本教程操作环境:Windows10系统、bootstrap3.3.7版、DELL G3电脑
bootstrap怎么实现滚动条
一:添加bootstrap样式增加滚动条
其实只要在 相关模块的 class属性中,再加上 pre-scrollable 即可。
例如是在
中添加pre-scrollable:<div class="pre-scrollable">登录后复制
二:通过设置overflow增加滚动条
<div style=" overflow:scroll; width:400px; height:400px;”></div>登录后复制记住宽和高一定要设置噢,否则不成的,不过在不超出时,会有下面的滚动条,所以不是最好的选择.
<div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>登录后复制记住宽和高一定要设置噢,否则不成的.这样比较好的是,在宽和高不超出时,只是一条线.
三:直接为div指定overflow属性为auto即可,但是必须指定div的高度,如下:
<div style="position:absolute; height:400px; overflow:auto"></div>登录后复制如果要出现水平滚动条,则: overflow-x:auto
同理,垂直滚动条为: overflow-y:auto
如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative
三:隐藏滚动条
{overflow: hidden !important;} 或者 {overflow-x: hidden; overflow-y: hidden;}可分别隐藏x轴或y轴的滚动条
相关推荐:bootstrap教程
以上是bootstrap怎么实现滚动条的详细内容。更多信息请关注PHP中文网其他相关文章!
相关标签:来源:php.cn本站声明本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn作者最新文章
2024-10-22 09:46:29 2024-10-13 13:53:41 2024-10-12 12:15:51 2024-10-11 22:47:31 2024-10-11 19:36:51 2024-10-11 15:50:41 2024-10-11 15:07:41 2024-10-11 14:21:21 2024-10-11 12:59:11 2024-10-11 12:17:31最新问题页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面,我昨天做了一部分,效果很好,今天我继续做剩下的部分,一切都很好。当我尝试将其作为普通html页面打开时,CSS或BOOTSTRAP不起作用,仅显示页面文本,...来自于 2024-04-06 21:58:0401800解决CSS中页面底部神秘空白的方法 我正在尝试使用Bootstrap和D3构建一个简单的网页,但我不知道如何消除底部的所有空白。我想摆脱它。我尝试将body和html的min-height设置为100%,但没有任何作...来自于 2024-04-06 20:22:1501454使用'折叠显示”类自定义 Bootstrap 手风琴标题的外观 我想设置具有类collapseshow的面板的卡标题样式。在此示例中,它是第一个面板。我尝试使用CSS来使用.accordion.card.card-headerbutton.bt...来自于 2024-04-06 12:53:1101376Web页面调整大小时,Bootstrap开关无法正常工作 这是代码:<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...来自于 2024-04-05 08:45:39013443在Laravel中以Bootstrap模式展示AWS PDF文件 我已经下载了awsurl,例如https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/655712202215174539...来自于 2024-04-04 22:16:18011450