You need to enable JavaScript to run this app.
最新活动
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们
火山引擎首页
全站搜索
D
独立滚动两个Bootstrap列

独立滚动两个Bootstrap列

下面是一个示例代码，演示了如何使用Bootstrap来实现独立滚动两个列：

<!DOCTYPE html>
<html>
<head>
    <title>独立滚动两个Bootstrap列</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .scrollable-col {
            height: 300px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col scrollable-col">
                <h2>列1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris eu nisl venenatis porta. Proin a orci mattis, luctus dui ac, tristique enim. Integer at dolor justo. Nulla neque lectus, luctus vel gravida at, aliquam vel arcu.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris eu nisl venenatis porta. Proin a orci mattis, luctus dui ac, tristique enim. Integer at dolor justo. Nulla neque lectus, luctus vel gravida at, aliquam vel arcu.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris eu nisl venenatis porta. Proin a orci mattis, luctus dui ac, tristique enim. Integer at dolor justo. Nulla neque lectus, luctus vel gravida at, aliquam vel arcu.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris eu nisl venenatis porta. Proin a orci mattis, luctus dui ac, tristique enim. Integer at dolor justo. Nulla neque lectus, luctus vel gravida at, aliquam vel arcu.</p>
            </div>
            <div class="col scrollable-col">
                <h2>列2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris eu nisl venenatis porta. Proin a orci mattis, luctus dui ac, tristique enim. Integer at dolor justo. Nulla neque lectus, luctus vel gravida at, aliquam vel arcu.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris eu nisl venenatis porta. Proin a orci mattis, luctus dui ac, tristique enim. Integer at dolor justo. Nulla neque lectus, luctus vel gravida at, aliquam vel arcu.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris eu nisl venenatis porta. Proin a orci mattis, luctus dui ac, tristique enim. Integer at dolor justo. Nulla neque lectus, luctus vel gravida at, aliquam vel arcu.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris eu nisl venenatis porta. Proin a orci mattis, luctus dui ac, tristique enim. Integer at dolor justo. Nulla neque lectus, luctus vel gravida at, aliquam vel arcu.</p>
            </div>
        </div>
    </div>
</body>
</html>

在上面的代码中，我们创建了一个具有两个列的Bootstrap布局，并将它们的高度设置为300px，然后通过给这两个列添加scrollable-col类来使它们具有滚动功能。

通过将overflow-y属性设置为scroll，我们可以为列添加垂直滚动条。这样，当内容超过列的高度时，用户就可以滚动内容。

你可以根据需要自定义列的高度和样式。这个示例只是一个基本示例，你可以根据自己的需求进行修改和扩展。

本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。
展开更多
icon

开发者特惠

面向开发者的云福利中心，ECS 60元/年，域名1元起，助力开发者快速在云上构建可靠应用
ECS首年60元

社区干货

关于移动端适配你了解多少? | 社区征文

不需要出现滚动条即可正常查看网站的所有内容,且文字图片清晰。这也是我们为什么需要使用viewport的原因。![kkk.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e1182769b78d45dea13caffe8bac7fc5~tp... 一个`CSS像素`等于一个设备独立像素。但是`CSS像素`是很容易被改变的,当用户对浏览器进行了放大,`CSS像素`会被放大,这时一个`CSS像素`会跨越更多的物理像素。`页面的缩放系数 = CSS像素 / 设备独立像素`。**...

移动开发

干货 | 字节跳动数据质量动态探查及相关前端实现

主要集中在探查卡片和数据预览两个部分。探查卡片包含了特定列的部分关键信息汇总,比如0值、Null值、枚举值等,如下图红框部分:![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d6a592c04114... 由于卡片和数据预览列的宽度差异较大,并且上下两部分滑动是独立的,造成在选择查看某个具体列的时候,上下对齐位置会比较麻烦,为了解决这个问题,这块增加了自动定位功能,演示效果如下:![gof2.gif](https://p9-juej...

大数据

干货|字节跳动数据血缘图谱升级方案设计与实现

以及数据在多个处理过程中的转换,是组织内使数据发挥价值的重要基础能力。数据地图平台在 2021 年接入了全链路核心元数据,包括但不限于:Hive、Clickhouse、Kafka、BI 报表、BI 数据集、画像、埋点、MySQL、Abas... 自然而然我们就想到了列表。如果能用一个列表来承载层级血缘的节点,用连线来连接不同层级的节点,那么久可以表达节点之间的血缘关系了。当节点较多超出一屏时可以拖动此列滚动条来查看更多节点,连线随之刷新位置。当...

技术

干货 | 字节跳动数据质量动态探查及相关前端实现

并且上下两部分滑动是独立的,造成在选择查看某个具体列的时候,上下对齐位置会比较麻烦,为了解决这个问题,这块增加了自动定位功能,演示效果如下:![picture.image](https://p6-volc-community-sign.byteimg.com/tos-cn-i-tlddhu82om/f38ed534446d456cb0e8c7f608a7a516~tplv-tlddhu82om-image.image?=&rk3s=8031ce6d&x-expires=1714580435&x-signature=TcYXMf4QMcmZpM49p7E8VLt45LU%3D)这部分需要解决的问题有两个:卡片中间点...

技术

特惠活动

热门爆款云服务器

100%性能独享，更高内存性能更佳，学习测试、web前端、企业应用首选，每日花费低至0.55元
￥60.00/年1212.00/年
立即购买

域名注册服务

cn/top/com等热门域名，首年低至1元，邮箱建站必选
￥1.00/首年起32.00/首年起
立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗，加速分发更实惠
￥2.00/年20.00/年
立即购买

独立滚动两个Bootstrap列-优选内容

关于移动端适配你了解多少? | 社区征文
不需要出现滚动条即可正常查看网站的所有内容,且文字图片清晰。这也是我们为什么需要使用viewport的原因。![kkk.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e1182769b78d45dea13caffe8bac7fc5~tp... 一个`CSS像素`等于一个设备独立像素。但是`CSS像素`是很容易被改变的,当用户对浏览器进行了放大,`CSS像素`会被放大,这时一个`CSS像素`会跨越更多的物理像素。`页面的缩放系数 = CSS像素 / 设备独立像素`。**...
干货 | 字节跳动数据质量动态探查及相关前端实现
主要集中在探查卡片和数据预览两个部分。探查卡片包含了特定列的部分关键信息汇总,比如0值、Null值、枚举值等,如下图红框部分:![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d6a592c04114... 由于卡片和数据预览列的宽度差异较大,并且上下两部分滑动是独立的,造成在选择查看某个具体列的时候,上下对齐位置会比较麻烦,为了解决这个问题,这块增加了自动定位功能,演示效果如下:![gof2.gif](https://p9-juej...
干货|字节跳动数据血缘图谱升级方案设计与实现
以及数据在多个处理过程中的转换,是组织内使数据发挥价值的重要基础能力。数据地图平台在 2021 年接入了全链路核心元数据,包括但不限于:Hive、Clickhouse、Kafka、BI 报表、BI 数据集、画像、埋点、MySQL、Abas... 自然而然我们就想到了列表。如果能用一个列表来承载层级血缘的节点,用连线来连接不同层级的节点,那么久可以表达节点之间的血缘关系了。当节点较多超出一屏时可以拖动此列滚动条来查看更多节点,连线随之刷新位置。当...
干货 | 字节跳动数据质量动态探查及相关前端实现
并且上下两部分滑动是独立的,造成在选择查看某个具体列的时候,上下对齐位置会比较麻烦,为了解决这个问题,这块增加了自动定位功能,演示效果如下:![picture.image](https://p6-volc-community-sign.byteimg.com/tos-cn-i-tlddhu82om/f38ed534446d456cb0e8c7f608a7a516~tplv-tlddhu82om-image.image?=&rk3s=8031ce6d&x-expires=1714580435&x-signature=TcYXMf4QMcmZpM49p7E8VLt45LU%3D)这部分需要解决的问题有两个:卡片中间点...

独立滚动两个Bootstrap列-相关内容

一文带你读懂:云原生时代业务监控|社区征文

**必须先提及两个基础概念:Promutheus 和 可观测性理论。**Prometheus 不必多说,它就是云原生监控的破局利剑,是兵器;可观测性理论就是我们监控的理论来源,是兵法;有了兵法和兵器,我们才能披荆斩棘,解决实际问题。... 2016 年 5 月继 Kubernetes 之后成为第二个正式加入 CNCF 基金会的项目,同年 6 月正式发布 1.0 版本。2017 年底发布了基于全新存储层的 2.0 版本,能更好地与容器平台、云平台配合。![picture.image](https://...

来自：开发者社区

技术资讯:VSCode大更新,这两个. 功能终于有了

预览:扩展的粘性滚动支持 - 在树视图和终端中粘性滚动。## 2. 资讯详述VSCode此次版本的更新,虽然变动挺多,但还是那句话,很多东西我们根本用不到,更不更新真的是无所谓哈。下面列举两个新特性,我觉得在项目中特别有用。### 2.1 浮动编辑器窗口VSCode 在其最新版本1.8.5中,引入了一个备受期待的功能:浮动编辑器窗口。这项新功能,允许用户将编辑器从主窗口中拖出,形成独立的轻量级窗口。在任何一个窗口中对编辑器所...

来自：开发者社区

火山引擎DataLeap数据质量动态探查及相关前端实现

前端目前是基于虚拟滚动Table做的,后续打算迁移到canvas table上。3. **前端探查:实时探查,可视化展现数据分布,突出质量指标。**3. **数据处理能力:函数处理能力(GroupBy..)**3. **操作** **栈** **:需要对... 主要集中在探查卡片和数据预览两个部分。 火山引擎DataLeap探查卡片包含了特定列的部分关键信息汇总,比如0值、Null值、枚举值等,如下图红框部分:![picture.image](https://p6-volc-community-sign.byteimg...

来自：开发者社区

热门爆款云服务器

100%性能独享，更高内存性能更佳，学习测试、web前端、企业应用首选，每日花费低至0.55元
￥60.00/年1212.00/年
立即购买

域名注册服务

cn/top/com等热门域名，首年低至1元，邮箱建站必选
￥1.00/首年起32.00/首年起
立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗，加速分发更实惠
￥2.00/年20.00/年
立即购买

读取日志服务 TLS 数据写入云搜索服务 ESCloud

您需要创建两个任务,一个实现生产消息,一个实现消费消息。 前提条件为保证网络访问安全,本文所使用的云产品服务均使用内网访问方式,因此要求 TLS 项目、云搜索服务实例和 Flink 资源池均处于相同地域的同一个 VPC... 'properties.bootstrap.servers' = 'tls-cn-beijing.ivolces.com:9094', --TLS 日志项目接入点地址,作为消息接收端时端口固定为 9094。 'format' = 'json', 'properties.enable.idempotence' = 'false', -...

来自：文档

读取日志服务 TLS 数据写入云搜索服务 Cloud Search

您需要创建两个任务,一个实现生产消息,一个实现消费消息。 前提条件为保证网络访问安全,本文所使用的云产品服务均使用内网访问方式,因此要求 TLS 项目、云搜索服务实例和 Flink 资源池均处于相同地域的同一个 VPC... 'properties.bootstrap.servers' = 'tls-cn-beijing.ivolces.com:9094', --TLS 日志项目接入点地址,作为消息接收端时端口固定为 9094。 'format' = 'json', 'properties.enable.idempotence' = 'false', -...

来自：文档

云原生时代,如何从 0 到 1 构建 K8s 容器平台的 LB(Nginx)负载均衡体系|社区征文

负载均衡代理层都是有专人进行独立开发和建设的,云原生 Kubernetes 容器平台下的 LB 代理层,同样需要有专人来负责建设和维护。那么 Kubernetes 容器平台基础下的的 LB(Nginx) 负载均衡代理层要怎么建设?和非容器平... * 目前这两个都可以实现 4 层,但是更多的还是使用 Nginx 的 7 层功能。### 2,容器化下 LB 的异同点在物理机时代,还没有容器化之前,典型的负载均衡的建设方案就是搭建一套 Nginx 集群,提供 7 层的代理;...

来自：开发者社区

「火山引擎」数智平台VeDI数据中台产品双月刊 VOL.08

技术干货文章等多个有趣、有料的模块内容。**双月更新,您可通过关注「字节跳动数据平台」官方公众号、添加小助手微信加入社群获取更多产品动态~**接下来让我们来看看 9-10 月数据中台产品有什么大事件吧~## ... 修改配置:支持高并发模式和大查询模式2个配置模板。 - 资源组管理:支持通过资源组限制用户的 CPU 与内存使用。- **引擎** - HaUniqueMergeTree 全面兼容 Alter 语法。 ### **湖...

来自：开发者社区

2022 年每个开发者必知的云原生趋势 | 社区征文

**反例**:应用服务的多个实例之间互相通信,共享一些内存数据;或者开发自治的集群选主、任务分发等功能。7. Port Binding-**端口绑定**>Export services via port binding每个微服务都应该是独立的,其接口和功... 国外也有作者提出除了这十二个因素之外,云应用设计还应该受到下面三个额外因素影响。**13. API First-**API优先**让一切成为服务。14. Telemetry-**可预测性**确保你的设计包括监测、特定领域、健康数据以...

来自：开发者社区

一口气看完43个关于 ElasticSearch 的使用建议

列化代价也非常大,这类 Group by 替换为 Composite 可以将查询速度提升 2 倍左右。正例:```// 创建Composite Aggregation构建器` CompositeAggregationBuilder compositeAggregationBuilder = Aggrega... 目前Elasticsearch支持聚合分页(滚动聚合)的目前只有复合聚合(Composite Aggregation)一种。滚动的方式类似于SearchAfter。聚合时指定一个复合键,然后每个分片都按照这个复合键进行排序和聚合,不需要在内存中缓存所...

来自：开发者社区

特惠活动

热门爆款云服务器

100%性能独享，更高内存性能更佳，学习测试、web前端、企业应用首选，每日花费低至0.55元
￥60.00/年1212.00/年
立即购买

域名注册服务

cn/top/com等热门域名，首年低至1元，邮箱建站必选
￥1.00/首年起32.00/首年起
立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗，加速分发更实惠
￥2.00/年20.00/年
立即购买

产品体验

体验中心

云服务器特惠

云服务器
云服务器ECS新人特惠
立即抢购

白皮书

一图详解大模型
浓缩大模型架构，厘清生产和应用链路关系
立即获取

相关主题

独立公网ip资源产品独立公网ip资源简介独立公网ip资源技术独立公网ip资源如何独立公网ip资源推荐独立公网静态ip地址独立工作的代码片段，在拼接在一起后不再工作 - VBA用户窗体独立构建中的加载光标独立管理每个产品的十进制价格独立关系模型mysql

最新活动

爆款1核2G共享型服务器

首年60元，每月仅需5元，限量秒杀
立即抢购

火山引擎增长体验专区

丰富能力激励企业快速增长
查看详情

数据智能VeDI

易用的高性能大数据产品家族
了解详情

热门访问

D - 将 ubyte[] 转换为 char[]D&amp;D角色扮演游戏转盘表格D* lite: 如何比较和排序这些配对键？D* lite: 我应该使用什么启发式函数？D* Lite：您可以根据实际机器人位置更改起始节点吗？D*LiteComputeShortestPathwhileloop问题 D*LiteComputeShortestPathwhile循环问题 D*Lite算法在存在多个新障碍物时的问题 D-Bus Python PyQt5 服务示例D-Bus Python服务示例

一键开启云上增长新空间

立即咨询