如何让多个bootstrap div水平滚动？
要实现多个bootstrap div水平滚动，你可以使用以下步骤：
- 首先，确保你已经引入了Bootstrap的CSS和JavaScript文件。
- 创建一个父容器div来包含所有需要水平滚动的bootstrap div。给这个父容器设置一个固定的宽度，并且需要具备
overflow-x: auto;的样式。
<div class="scroll-container" style="width: 100%; overflow-x: auto;">
<!-- 这里放置需要水平滚动的bootstrap div -->
</div>- 在父容器中，创建一个内部div作为内容容器，并设置宽度超过父容器的宽度。
<div class="scroll-container" style="width: 100%; overflow-x: auto;">
<div class="content-container" style="width: 200%;">
<!-- 这里放置需要水平滚动的bootstrap div -->
</div>
</div>- 在内部div中，按需添加需要水平滚动的bootstrap div。这些div可以使用Bootstrap的栅格系统进行布局。
<div class="scroll-container" style="width: 100%; overflow-x: auto;">
<div class="content-container" style="width: 200%;">
<div class="row">
<div class="col-md-6">
<!-- 第一个bootstrap div -->
</div>
<div class="col-md-6">
<!-- 第二个bootstrap div -->
</div>
<!-- 添加更多需要水平滚动的bootstrap div -->
</div>
</div>
</div>请注意，以上示例中的样式和布局只是演示用途，你可以根据实际需求进行调整和修改。
推荐的腾讯云相关产品和产品介绍链接地址：暂无。
希望这个回答能够帮助到你！如果你有任何进一步的问题，请随时提问。
相关·内容
我尝试使用overflow-x使其可以水平滚动。尽管如此，额外的div还在下降。有没有办法让它在使用全屏宽度后可以滚动。请帮个忙。谢谢。 display:block;} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/
浏览 29提问于2021-10-25得票数 0
回答已采纳
1回答
第三列将有多个图像，可以单击这些图像来执行操作。因此，我们希望这个列应该有一个水平滚动。因此，我在第三列中添加了一个<div>，其中添加了多个<a>标记，每个标签中都包含<img>。问题是div是垂直扩展的。我想让它水平生长。
我在代码中使用引导程序。但遗憾的是，bootstrap并没有提供开箱即用的水平滚动<
浏览 1提问于2020-07-12得票数 0
回答已采纳
1回答
我目前使用的是and，bootstrap和。当我呈现：const Title2D = () => { <div> </div>
浏览 2提问于2022-07-28得票数 -1
我有一个HTML页面(使用Bootstrap 3)，其中包含一个包含以下HTML的div：这导致DIV有一个滚动条(因为它有很多内容当我没有这个带有overflow-y滚动的div时，整个网页(而不是div)都有一个滚动的水平滚动条。我认为额外的水平宽度实际上等于div中
浏览 1提问于2013-11-11得票数 0
1回答
我正在扩展一个在agendaDayView中显示多个全日程表的日程安排应用程序，为多个人显示当天的日程安排。让每个完整日历使用自己的滚动条已被拒绝；因此，所有日历都显示完整长度，并在周围的div中设置单个滚动条。
现在的问题是，在垂直滚动期间，标题保持不变。使用CSS并正确放置div，我能够让日历与标题分开垂直滚动，从而达到“固定标题”的效果。然后问题是水平滚动:如果我让<
浏览 2提问于2012-06-20得票数 2
回答已采纳
2回答
我不确定我以前在哪里见过这个，但我确信有一种方法可以使水平滚动。例如，假设你有多个DIVs是ff:结构： <div>Content</div> <div>Content</div&g
浏览 0提问于2010-08-26得票数 6
回答已采纳
我正在使用bootstrap-sass将Twitter Bootstrap集成到Rails中，但我遇到了浏览器水平滚动条显示的问题，而不需要它。Rails视图中的示例代码： <div class="span4"> </div>
<div class="span8"
浏览 1提问于2012-02-26得票数 0
回答已采纳
5回答
我正在尝试创建一个水平的卡片列表，其中一次显示3张卡片，其他的是水平滚动的，如下所示：使用CSS可以很容易地做到这一点，但我想使用Bootstrap来完成。是通过材料设计普及的，它们和Bootstrap中的任何其他东西一样易于使用。对于这个例子，它也可以是常规的div，而不是卡。我正在努力创建一个可滚动的X卡片(或div)容器，其中一次显示3张卡片，其他的溢出到右侧，并且是可滚动的。我不确定如何使用<em
浏览 2提问于2016-03-15得票数 32
1回答
我尝试使用bootstrap进行一个只有一个水平滚动条的多选，我不想让每个选项都有一个水平滚动条。我该如何解决这个问题？<div class="row w-50"> <select multiple class="custom-select d-inline overflow-autooption>
浏览 4提问于2020-05-08得票数 0
我有一个表单(class="form-horizontal")，在里面我添加了一个带有类" form -group“的div，结果给出了一个水平滚动条。我在JSfiddle中创建了一个示例，使用的代码与Bootstrap网站的代码相同。你可以在这里看得更清楚：<link href="https://maxcdn.bootstrapcdn.com/bootst
浏览 1提问于2015-11-10得票数 5
回答已采纳
我有两个div，它们包含多个div，并且可以滚动。我有一个垂直的div，它在包含的div上有可拖动对象。我的水平分区是可排序的，我通过connectToSortable将可拖动的连接到它。水平排序可以在重新排列项目时水平滚动。但是，如果我从垂直方向拖动到水平方向，它将不会像纯排序时那样滚动水平div。我已经阅读了这里的所有条目，用于滚动<
浏览 2提问于2012-12-21得票数 2
1回答
您好，我是新手bootstrap。我想做一个表格，并使其具有响应性，但是我已经创建了一个表格，但它在小型设备中查看时没有响应性。我不确定我错过了什么。有人能帮我吗？谢谢 代码如下： <!DOCTYPE html> <head> <meta charset="utf-8device-width, initial-scale=1"
浏览 16提问于2021-09-09得票数 1
回答已采纳
1回答
我有一个绝对定位的主父div .objects-wrap，因为我有一个table。
我希望这能解释这个场景，并提
浏览 0提问于2016-04-12得票数 0
在使用twitter bootstrap 3时，在移动设备菜单上，nabber有水平滚动和垂直滚动。
它不存在与2.3，我不知道如何禁用它，让菜单项扩展到完全没有任何滚动条。
浏览 18提问于2013-08-31得票数 11
回答已采纳
我想使用标准的overflow: auto让表格垂直滚动，但不需要在表格的容器上设置高度。Bootstrap有一个内置的类表-响应处理水平滚动，但我不知道如何在没有最大高度的情况下直接在表的容器上进行垂直滚动。下面是基本的HTML和BS： <
浏览 23提问于2019-10-23得票数 1
回答已采纳
1回答
我正在尝试构建一个页面，让bootstrap水平滚动任何项目，而不是垂直滚动。例如： <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap"></script>
<script src=
浏览 1提问于2015-01-23得票数 0
在容器div中有三个并排的div元素，它们的宽度小于子元素的总宽度。你可以找到这个案例的关键：我如何安排孩子不包装在容器div中？它现在是垂直滚动的，我想让它水平滚动。
浏览 0提问于2012-04-22得票数 21
回答已采纳
当我选择选项并水平滚动阅读完整内容时，它会显示部分内容，而取消选择和滚动则显示完整内容。选择选项后水平滚动取消选择选项后水平滚动编辑1:/3.3.6/css/bootstrap.min.css" rel="stylesheet&qu
浏览 4提问于2016-06-27得票数 3
回答已采纳
1回答
<div class="panel panel-primary"> <h3 class="panel-title"></div> <div class="col
浏览 1提问于2015-08-28得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
