如何在bootstrap中制作多行多列的水平滚动条？
在Bootstrap中制作多行多列的水平滚动条可以使用Bootstrap的Grid系统和自定义样式来实现。下面是一个实现的步骤：
- 使用Bootstrap的Grid系统创建一个包含多行多列的容器。
<div class="container">
<div class="row">
<div class="col-12">
<!-- 每列的内容 -->
</div>
<div class="col-12">
<!-- 每列的内容 -->
</div>
<!-- 添加更多列 -->
</div>
<!-- 添加更多行 -->
</div>- 为容器添加自定义样式，使其显示水平滚动条。
.container {
overflow-x: auto;
white-space: nowrap;
}这将使容器具有水平滚动条，并且内容不会换行。
- 如果内容超出容器宽度，可以为内容添加自定义样式以适应水平滚动。
.col-12 {
display: inline-block;
width: 300px; /* 根据实际情况调整宽度 */
margin-right: 10px; /* 添加列之间的间距 */
}这将使每列以内联块元素的方式显示，并且设置宽度和列之间的间距。
至于Bootstrap的相关内容和腾讯云产品推荐，不便提供具体链接，请根据自己的需求和实际情况进行搜索和选择合适的资源和产品。
相关·内容
2回答
我希望多行和多列是水平滚动只有一个滚动条。我可以设法使滚动条只有一行和多列，我尝试了以下方法，但我只能使滚动条只行。下面给出的是我尝试过的代码 .page { margin: auto; list-style: none;
overflow-x: auto
浏览 40提问于2020-10-01得票数 0
回答已采纳
1回答
我正在使用CGRIDVIEW如果要对第20列进行排序，则必须使用滚动条才能到达该列所以水平滚动条失去了它的位置，回到了原来的位置。如何在对网格视图进行排序后才在第20列制作滚动条$this-
浏览 2提问于2014-05-29得票数 1
2回答
对于不适合单元格边框的文本，可以使用text-overflow: ellipsis;或text-overflow: fade(10px);添加省略号或淡出效果。但是，如果表可以水平溢出，这将不起作用。最右边的列将会淡出，以明显地显示可查看区
浏览 26提问于2017-06-27得票数 0
1回答
我有一个绝对定位的主父div .objects-wrap，因为我有一个table。
现在，随着列的增加，水平滚动出现在底部，指向parent div .objects-wrap。现在问题是在我的上一个td中，有一个bootstrap下拉菜单，它被隐藏了，因为水平滚动条，即使有一个z-index:1000应用于下拉菜单。水平滚动条与下拉菜单重叠如何在滚动条上显示下拉
浏览 0提问于2016-04-12得票数 0
我正在尝试为我的游戏构建一些界面，在Godot4.0中制作。我想做一个“工具箱”的场景，需要决定使用什么样的容器。我来自web开发，在那里我使用一个flex column，每个工具都是列中的一个条目。在Godot4中，我有许多选项，这两个相关选项几乎无法区分：UI描述是“垂直盒容器”。
官方文件只说“垂直框容器”，并告诉我它有一个separation属性。告诉我它同时有一个h_separation和v_
浏览 0提问于2023-03-10得票数 1
回答已采纳
5回答
我试图找出自举数据库表中第n个列数的答案。有些人以前问过，但仍然没有解决方案。因此，我的问题是如何管理列的响应性。假设我有5个列，它们有自己的名称。|街道的名字| Victoria | Lombard | Champs-Elysées | Chervonoarmeyskaya |(没有缩写，读者必须理解)a)使用字体大小，使其更小以适应但成功的480px (至少对于可读的
浏览 2提问于2014-03-24得票数 0
1回答
我有一个Bootstrap 3网站，在导航栏中有两个下拉列表。其中一个下拉列表有时只有几个项目(少至4个)，有时多至150个。这些都是简短的项目-每个项目只有几个字符。作为第一个解决方案，我创建了一个包含3列的下拉列表，如所述。然而，一些屏幕上有150个项目，并不是所有的项目都适合。我想做的是添加一个滚动条。
适用于单列下拉菜单，但不适用于多列菜单。有没有办法将滚动条添加到多<em
浏览 3提问于2014-10-23得票数 0
我有一个jqGrid，它是引导div容器的一部分。这个jqGrid的宽度是可变的:用户最多可以选择20列，当他或她选择所有20列时，它不可能放入引导容器中。当你的超文本标记语言表格注定要放在<div class="container">中时，有没有办法摆脱引导网格系统呢？
为了澄清，我希望页面有一个水平滚动条，而不会切断任何内容的宽度。
浏览 2提问于2013-02-08得票数 1
2回答
在iPad上滚动iframe
、、、、
可能重复：
<table width="100%"><td></tr>现在，grid_data.html拥有许多行/列的表格数据，并且是主页的一
浏览 2提问于2011-05-25得票数 3
回答已采纳
使用Bootstrap 3输入组，我尝试创建一个包含多行的文本区域。问题是，在IE9中(没有检查过其他IE版本)，当文本区域的左侧有一个input-group-addon时，文本会突出到文本区域之外。
出现水平滚动条-虽然文本框“结束”，但文本溢出，如您在所附照片中所见。问题的另一个方面是，当使用单行文本框时，水平滚动条再次出现-尽管在这种情况下没有文本溢出。这些问
浏览 0提问于2013-11-02得票数 2
1回答
我在ng-grid中的一个列中有一个非常长的文本。如果文本溢出单元格，则将省略号放在末尾。我想要做的是找到一些向用户显示大文本的好方法。我尝试了以下几种方法：
1.)工具提示2。)目前，我正在尝试一种方法来展开和折叠特定的单元格或整行。我尝试在调试器中更改样式，但视图中没有更改，即使它显示单元格和行的高度已经更改。所以我想要的是有一种方法，可以很好地向用户显示长文本(30-35行)或使其展开/折叠的
浏览 2提问于2014-12-30得票数 0
1回答
我使用Bootstrap 4响应表。是否可以关闭水平滚动条并排列表格，以使列成为小分辨率的行？然后只需要垂直滚动，就像下面这个制作得非常好的表格：
浏览 9提问于2017-03-09得票数 1
回答已采纳
SSRS报告：{2008-r2} (.rdl文件) Tablix --向数据中添加水平滚动条rdl文件是用xml或类似xml的语言编写的。为SSRS报告向rdl文件中的列添加水平滚动条的适当方法是什么？
注意:这个项目根本没有.css文件
浏览 0提问于2018-10-15得票数 0
回答已采纳
1回答
如何在flex中实现特定列的水平滚动条？假设我有一个列，其行显示特定呈现的图形组件。如果它超过了列的宽度，那么如何为该特定列设置滚动条？如果我将horizontalScrollPolicy=设置为“on”，那么它将为整个数据集设置水平滚动条。我想为特定的column.Can做这件事吗？
浏览 5提问于2013-03-02得票数 0
我有一个有1行的表，它被冻结在tabultor中，我增加了调整列大小的功能，但是在展开列大小时，如果列的宽度为总宽度，是否也有方法为冻结的行添加水平滚动条。
我能够水平滚动的情况下，多行与1冻结行。
浏览 2提问于2021-06-18得票数 0
3回答
WrapPanel滚动条
、、、
" Fill="Yellow" /></WrapPanel>
如何在内容不适合时显示垂直和水平滚动条</WrapPanel>但是，WrapPanel停止包装任何东西(总是一列
浏览 6提问于2017-07-25得票数 4
5回答
水平滚动条
、、
如果内容在其边框中溢出，如何在页面中自动创建水平滚动条。various of text here that can makes it go out the border--> </body>如果我的内容中的文本太长了，我如何制作一个自动的水平滚动条？
浏览 1提问于2012-12-18得票数 5
回答已采纳
通过参考的答案，我设法实现了一个3个多列的JComboBox，如下所示。然而，这并不完美。我的意图是有一些东西没有水平滚动条，如下所示。
源代码是和
浏览 4提问于2010-10-19得票数 5
回答已采纳
1回答
我有一个用boostrap制作的容器： ? 问题是，我如何才能进行水平滚动，以保持容器的第一张图片的外观，而不是手机分辨率？ 这是电话解析中的容器： ? 我不喜欢那样..这是我的代码： <div class="card-body scroll" style="border: none;"> &
浏览 20提问于2021-01-28得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
