Bootstrap列表添加滚动条

最新推荐文章于 2024-05-14 09:55:02 发布
最新推荐文章于 2024-05-14 09:55:02 发布
阅读量2.9k 收藏 5
点赞数 1
分类专栏： Bootstrap 框架

有时候列表中数据过多，导致超出页面，影响视觉感受。这时我们需要添加一个滚动条。

初始状态如图：
在这里插入图片描述

代码如下：

    					<ul class="list-group">
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					</ul>

可以看到，图中的列表已经超出了页面，影响阅读。

这时我们可以在列表的外层添加一个div标签，并设置其class="row pre-scrollable"。

代码如下：

    					<div class="row pre-scrollable">				
    					<ul class="list-group">
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					    <li class="list-group-item">免费域名注册</li>
    					    <li class="list-group-item">免费 Window 空间托管</li>
    					    <li class="list-group-item">图像的数量</li>
    					    <li class="list-group-item">24*7 支持</li>
    					    <li class="list-group-item">每年更新成本</li>
    					</ul>
    					</div>

效果如图：
在这里插入图片描述
可以看见列表旁边多了个滚动条。

.NET跨平台
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
Bootstrap表格在设计网页时是一种非常常用的组件，尤其在处理大量数据时，为了提供更好的用户体验，我们经常需要在tbody部分添加竖向滚动条，同时保持表头固定不动。这样，当用户滚动内容时，表头始终保持可见，便于...
bootstrap多层模态框滚动条消失的问题
08-29
Bootstrap 在模态框打开时，会给 body 元素添加一个 modal-open 的 class，而这个 class 会影响模态框的滚动条。当模态框关闭时，body 元素的 modal-open class 会被移除，从而导致模态框的滚动条消失。 解决方案 ...
bootstrap模态框里添加滚动条每次关闭再打开滚动条不能自动回到最顶端问题
井底的青蛙
11-03 1857
       &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;                 &lt;div class="modal-dialog"&
Bootstrap Table 超多列 使用滚动条
guyezhou51的博客
11-30 1681
Bootstrap Table 超多列 使用滚动条
五、Bootstrap之菜单栏和导航栏
最新发布
Itcodewizard的博客
05-14 1229
本文主要学习 Bootstrap 中提供的菜单栏和导航栏组件的使用方法和样式，按照 Bootstrap 的规范正确构建菜单栏和导航栏的 HTML 结构。Bootstrap 类：熟悉并正确应用 Bootstrap 的类名，如.navbar.nav.nav-item.nav-link等。响应式设计：学习如何使用 Bootstrap 的响应式工具类来确保菜单栏和导航栏在不同屏幕尺寸下的良好显示效果。1、通过在代码编辑器中实际编写代码，尝试创建不同样式的菜单栏和导航栏，加深理解和熟练应用；
2021-09-15 bootstrap table 滚动条
小贝de
09-15 2416
//表示表格产生横向滚动条，内容设置为一行 //不产生横向滚动条，数据内容折行显示
解决使用bootstrap莫名其妙出现横向滚动条问题
生而为人我很抱歉
11-10 848
检测页面是否有使用bootstrap的。元素，如果有，给ul固定宽度即可。
【技术】BootStrapTable 滚动条控制
Riu_Peter
11-08 2547
BootStrapTable 滚动条控制
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
08-31
通过以上 CSS 调整，我们可以有效地解决 Bootstrap Table 在末行显示下拉菜单时滚动条遮挡的问题，同时保持工具栏的正常显示。不过，需要注意的是，直接修改库的默认样式可能会导致其他地方的样式异常，因此建议将...
jsp中为表格添加水平滚动条的方法
10-21
在网页设计中，有时我们需要在表格中添加水平滚动条以便在数据过多时用户可以方便地浏览。在JSP（JavaServer Pages）中，这可以通过HTML和CSS，以及可能的JavaScript来实现。以下是一个详细的步骤来解释如何在jsp...
jQuery Bootstrap响应式新闻列表文字上下滚动特效
11-24
标题中的“jQuery Bootstrap响应式新闻列表文字上下滚动特效”指的是使用jQuery库和Bootstrap框架来创建一个适应不同设备屏幕尺寸的新闻列表，同时实现文字的上下滚动效果。这种特效常见于网站的新闻或更新部分，...
bootstrap实现响应式自适应导航栏，并实现平滑滚动
07-11
利用bootstrap和jQuery制作的一个响应式导航栏，即能够监听页面滚动事件，当页面滚动到页面某位置时导航栏会自动发生变化。同时点击导航栏滚动时利用简单的jQuery实现了平滑滚动。而且能自适应屏幕大小的变化，监听了onresize事件。
Bootstrap页面滚动效果 后台页面模板
04-15
Bootstrap页面模板 带有滚动效果，鼠标向下拉动时，导航栏会自动出现在顶端
Bootstrap 滚动监听(Scrollspy)
前端小99的博客
03-24 3384
  body {   position: relative;       }  &lt;/style&gt;&lt;/head&gt;&lt;body data-spy="scroll" data-target=".navbar" data-offset="50"&gt;&lt;nav class="navbar navbar-expand-sm  navbar-dark fixed
给bootstrap-treeview添加滚动条
编程技术分享，Java后端、Vue前端
12-15 2536
 bootstrap-treeview默认是不加滚动条的，如果你内容多，出现的滚动条是浏览器自动的滚动条（就是全屏的）。 增加滚动条很简单，外面包一层这个div即可。 &lt;div style=" overflow:scroll; width:20%; height:680px;float:left"&gt; &lt;div id="tree"&gt;&lt;/div&gt; &lt;/d...
利用jquery和BootStrap实现动态滚动条效果
zhaosx1234567的博客
11-24 3091
在某项目中遇到excel导入时客户要求显示滚动条效果，在此基础上使用js为其封装了个进度条类，只需要简单为其创建个div容器就可轻松实现效果，类具体如下：   &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;me
bootstrap dropdown-menu添加滚动条
05-19
如果你的 `dropdown-menu` 高度超过了浏览器视口高度，那么可以添加滚动条来浏览整个菜单项。你可以按照以下步骤添加滚动条： 1. 为 `dropdown-menu` 添加一个固定高度，并将 `overflow-y` 设置为 `auto`： ```css .dropdown-menu { max-height: 200px; /* 自定义高度 */ overflow-y: auto; } ``` 2. 隐藏默认的滚动条样式，并添加自定义样式： ```css .dropdown-menu::-webkit-scrollbar { width: 10px; } .dropdown-menu::-webkit-scrollbar-track { background-color: #f1f1f1; } .dropdown-menu::-webkit-scrollbar-thumb { background-color: #888; border-radius: 5px; } ``` 这样就可以给 `dropdown-menu` 添加滚动条了。你可以根据需要自定义滚动条的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值