如何让bootstrap表格自动出现水平滚动条?

发布于 2022-09-04 04:15:15 字数 210 浏览 11 评论 0

图片描述

上面图片中的bootstrap表格在尺寸缩小时全部挤成了一堆,这还算是响应式吗?我觉得应该出现水平滚动条,这样无论设备尺寸大小变化时也看到到全部了。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

无妨# 2022-09-11 04:15:15

将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。比如这样写:
图片描述

心安伴我暖 2022-09-11 04:15:15

1、上面表格内容只是折行而已,由于内容很少,而且周围空间足够,没有影响阅读。

2、响应式本来就是避免出现横向滚动条,还要手动拖拉滚动条查看被遮挡内容这才不是响应式。

所以 折行的内容你还觉得太多的话,一般就是隐藏掉,用另一个更简短的内容替换显示
http://www.bootcdn.cn/
这有个bootstrap的很简单的表格,开始标题和内容是平行的,然后缩小一点窗口变成上下格式了,再缩小到手机尺寸,内容完全隐藏只剩标题了。基本都是这个套路,比如你这个表格interner Explore 4.0这种你觉得堆起来还是太多了,可以隐藏掉,换一个IE4.0替代。

哥,最终变帅啦 2022-09-11 04:15:15

我记得bootstrap好像有提供class显示水平条吧,实在不行自己改下吧

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文