本文将指导您如何利用Bootstrap框架，创建一种常见的网页布局：一侧内容固定且不滚动，另一侧内容则可独立滚动。我们将重点介绍Bootstrap的溢出工具类overflow-auto，结合其网格系统，实现高效且响应式的分栏设计，适用于侧边导航、主内容区等多种场景。
核心概念：分栏布局与溢出控制
在现代网页设计中，左右分栏布局是一种极其常见且高效的界面模式，例如左侧常用于导航菜单、工具栏或辅助信息展示，而右侧则承载着页面的主要内容。在许多应用场景中，我们期望左侧区域能够始终保持在视口内，不随页面的滚动而移动，并且其自身内容也不滚动；而右侧主内容区域则可以独立滚动，以适应大量信息的展示需求。
要实现这种“一侧固定，一侧滚动”的效果，核心在于对CSS overflow 属性的理解和应用。overflow 属性用于控制当元素的内容超出其容器边界时应如何处理。其主要取值包括：
visible (默认值)：内容不会被裁剪，会溢出元素框。hidden：溢出的内容会被裁剪，不显示滚动条。scroll：无论内容是否溢出，都会显示滚动条。auto：当内容溢出时显示滚动条，否则不显示。
对于本教程的目标，我们将主要利用 overflow: auto 来创建可滚动的区域，而固定区域则通过默认行为或明确设置来确保其内容不滚动。
利用 Bootstrap 实现固定与滚动分栏
Bootstrap 框架为开发者提供了强大的网格系统和一系列实用工具类，极大地简化了复杂布局的实现。其中，溢出工具类（Overflow Utilities）正是解决我们当前问题的高效方案。
实现可滚动区域的关键在于使用 overflow-auto 类。当这个类被应用于一个 HTML 元素时，它会为该元素设置 overflow: auto 的 CSS 属性。这意味着如果元素的内容超出了其预设的高度或宽度，浏览器将自动为其添加滚动条，允许用户滚动查看所有内容；反之，如果内容未溢出，则不会出现滚动条。
对于“固定无滚动”的列，我们通常无需为其应用特殊的溢出类。在合理的布局和内容管理下，该列的内容会自然地适应其容器，或者通过默认的 overflow: visible 行为来显示所有内容而无需滚动条。如果希望明确禁止其内部滚动，即使内容溢出也只是隐藏，可以考虑使用 overflow-hidden 类。
实战示例：创建左右分栏布局
以下是一个使用 Bootstrap 5 实现左右分栏布局的完整示例。在这个例子中，我们将创建一个占据整个视口高度的容器，其中左侧列作为固定侧边栏，右侧列作为可滚动的主内容区。
Bootstrap 固定与滚动分栏布局 /* 确保html和body占据整个视口高度，且无默认边距 */ html, body { height: 100%; margin: 0; padding: 0; } /* 自定义容器，使其占据整个视口高度并使用Flexbox布局 */ .container-fluid-full-height { height: 100vh; /* 100% viewport height */ display: flex; /* 使用Flexbox使子列并排 */ padding: 0; /* 移除默认内边距 */ } /* 固定侧边栏样式 */ .fixed-column { background-color: #f8f9fa; /* 浅灰色背景 */ border-right: 1px solid #dee2e6; /* 右侧边框 */ padding: 15px; /* 默认不设置overflow，内容不溢出则无滚动条 */ /* 如果希望内容溢出时隐藏，可添加 overflow: hidden; */ } /* 可滚动主内容区样式 */ .scrollable-column { background-color: #ffffff; /* 白色背景 */ padding: 15px; /* overflow-auto 类将在这里发挥作用，使其内容可滚动 */ } /* 仅为演示滚动效果添加大量内容 */ .long-content { height: 1500px; /* 制造足够的高度以触发滚动 */ background-color: #e9ecef; padding: 20px; text-align: center; line-height: 1.5; /* 调整行高 */ color: #495057; margin-top: 20px; }<!-- 右侧可滚动列固定侧边栏
这部分内容将始终保持可见，不会随右侧内容的滚动而移动。
- 菜单项 1
- 菜单项 2
- 菜单项 3
- 菜单项 4
- 菜单项 5
- 菜单项 6
- 菜单项 7
- 菜单项 8
您可以在这里放置导航、广告或其他需要常驻显示的信息。
以上就是Bootstrap实现左右分栏布局：一侧固定，一侧内容可滚动的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1581374.html
微信扫一扫
支付宝扫一扫
