Bootstrap 5全屏两列应用程序，内容可滚动
Bootstrap 5 是一个流行的前端框架，用于快速构建响应式网页设计。要创建一个全屏两列的应用程序，其中内容可滚动，你可以使用 Bootstrap 的网格系统和一些自定义 CSS。以下是一个基本的示例，展示了如何实现这一目标：
基础概念
- 网格系统：Bootstrap 的网格系统允许你通过行（row）和列（column）来创建布局。
- 响应式设计：Bootstrap 提供了断点，使得布局可以根据屏幕大小自动调整。
- 全屏布局：通过设置 HTML 和 body 的高度为 100%，可以实现全屏效果。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Fullscreen Two Column Layout</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<style>
html, body {
height: 100%;
margin: 0;
}
.container-fluid {
height: 100%;
}
.row {
height: 100%;
}
.col {
overflow-y: auto;
padding: 1rem;
}
</style>
</head>
<body>
<div class="container-fluid d-flex flex-column">
<header class="bg-primary text-white p-3">
Header
</header>
<div class="row flex-grow-1">
<div class="col-md-6 bg-light">
<!-- Content for the first column -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
<!-- Add more content to enable scrolling -->
</div>
<div class="col-md-6 bg-secondary text-white">
<!-- Content for the second column -->
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...</p>
<!-- Add more content to enable scrolling -->
</div>
</div>
<footer class="bg-dark text-white p-3">
Footer
</footer>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>优势
- 响应式：自动适应不同屏幕尺寸。
- 易于实现：Bootstrap 提供了丰富的组件和工具，简化了布局过程。
- 可维护性：使用标准化的类名，便于团队协作和维护。
类型与应用场景
- 类型：这种布局适用于需要两个主要区域的应用程序，如仪表板、数据分析页面等。
- 应用场景：适合网站的主页、产品展示页面、后台管理系统等。
可能遇到的问题及解决方法
- 滚动条不显示：确保
.col类设置了overflow-y: auto;。 - 内容溢出：检查是否有固定高度的元素阻止了内容的正常滚动。
- 布局错乱：使用浏览器的开发者工具检查元素的盒模型和布局，确保没有意外的外边距或内边距。
通过上述方法，你可以创建一个简洁且功能齐全的全屏两列布局，适用于多种网页设计需求。
相关·内容
我正在尝试使用Bootstrap 5创建一个带有页眉和页脚的两列全屏网页。这两列都包含不适合的内容，因此需要单独的滚动条。此外，其中一列包含一个带有“粘性”标题的列表，当用户滚动时，这些标题将保留在顶部。对于带有列表的列，滚动应该只发生在列表中，对于主内容列，整个列都是可滚动
浏览 34提问于2021-09-14得票数 0
回答已采纳
1回答
我想知道有没有在线资源可以在不使用Bootstrap的情况下创建一个全屏模式。我想自己学习如何实现这一点。完整的效果将是一个项目部分的可滚动覆盖，所以如果用户想要查看项目的更多内容，他们可以点击图像，全屏框覆盖当前页面，并能够在完成时关闭。
浏览 2提问于2015-03-24得票数 1
我有一个网络应用程序的反应，这将主要用于Kindle Fire。我们即将切换到反应本机，但在此之前，我们想要测试用户故事的流程使用一个网络应用程序。我们为Kindle的全屏幕尺寸设计了一个应用程序，它的导航条将内容向上推高，使内容变得可滚动，使得浏览器切换到丝绸全屏模式，然后隐藏起来，然后显示网址条。
浏览 6提问于2020-02-11得票数 0
回答已采纳
我们发现三星安卓浏览器(在SGS5，安卓5.0版本上测试)的“自动隐藏工具栏”功能存在问题。这不仅限于网页游戏，它还破坏了其他类型的应用程序，例如，那些在自己的容器中滚动内容<
浏览 1提问于2015-05-29得票数 0
1回答
如何在引导模式中显示溢出内容
、、、、
我在我的web/移动应用程序中使用bootstrap中的模态。我的意图是，当我的模态被触发时，它们会填满整个移动屏幕。我已经添加了一个自定义的css，使我的模态‘全尺寸’。bottom: 0; margin-left: 0; height: 100%;}
然而，在手机上，虽然我确实成功地看到了全屏模式的显示，但我似乎无法看到全屏模式中“溢出”的内容，即如果内容高度大于我的屏幕高度，我将无法向下
浏览 0提问于2013-07-22得票数 2
回答已采纳
我正在创建一个全屏web应用程序，其中将有一些模块/小部件，其中使用新的iOS 5溢出:滚动功能。我想要的是禁用滚动html/body时的“弹跳”效果(因为它是全屏的)，但只在可滚动元素上保留该效果。要平滑可滚动元素的效果，我有： overflow: scroll;
-webkit-ov
浏览 2提问于2011-11-08得票数 9
回答已采纳
我想建立一个全屏与twitter bootstrap框架的web应用程序。我正在测试bootstrap响应式css，但我不喜欢窗口浏览器调整大小、页面内容改变位置时的情况。所以我希望在顶部有一个完整的栏，一个左边的栏，一个中间的内容栏和一个右边的栏，最后是一个页脚，当浏览器调整大小时，我不希望那个元素改变位置(不是流动的)。我也想在全屏模式下使用网格(span5，offset4等)。实际上是占据所有屏幕大小的50px大小的列的网格。我
浏览 0提问于2012-07-23得票数 1
我使用全屏画布作为页面第一部分的背景。但是一旦我添加了第二个部分，垂直滚动条出现，画布的高度就会减少一点，并且会出现一个间隙。下面是我的代码：
附言:对不起，我的代码包含错误，我修复了它们。
浏览 2提问于2021-01-06得票数 1
我正在开发一个单页web应用程序。web应用程序包含一个周围的框架(主要是标题和画布外菜单)和一个可滚动的内容区域，这是一个嵌套在html层次结构中更深层次的视区。由于可滚动区域是整个页面的嵌套oart，因此主网页本身停留在固定位置，不会滚动。显然，这阻碍了我使用将Safari设置为<e
浏览 1提问于2014-02-06得票数 0
典型的用例是包含两列的页面：JQuery移动中的标准行为是内容与页面一起滚动。有没有可能用JQM构建一个使用不同范式的应用程序--一个带有可滚动内容的固定视区？
浏览 0提问于2012-03-24得票数 11
回答已采纳
1回答
在卡片中，我有两列都需要独立滚动。所以我不希望网站是可滚动的，但卡内的两列。第一列为实际聊天，第二列为聊天用户列表。虽然我让它通过像素设置硬编码的最大高度值，但我似乎无法让它与自动全屏高度一起工作。所发生的情况是，卡片被呈现为完全高度，但是尽管有一个overflow-y: auto，但是内容会溢出卡，当设置溢出时，它基本上会使滚动条显示内容的确切高度。代码：
浏览 0提问于2018-10-25得票数 5
回答已采纳
3回答
我正在开发一个web应用程序，我希望在较大的屏幕上有两个独立的可滚动区域:左边是主内容区域，右边是较小的侧边栏。我已经设法使用absolute定位和overflow属性在CSS中实现了这样的布局，请参阅这个JSFiddle：
这很好，但是我也尝试使用Bootstrap (3.1.1)来使站点响应和组件/样式。基本上，理想情况下我喜欢使用Bootstrap约定(列类等)。为了使移动屏幕上的右窗格在传统的垂直布局中折叠到左窗格的下方(或者完全消失
浏览 3提问于2014-03-31得票数 15
回答已采纳
1回答
以bootstrap 4响应表为例： <div class="table-responsive"> ...</table>
</div> 该表格在iOS上不会显示为可滚动，除非你尝试滚动它，因为滚动条不会显示，而且苹果已经删除了设置滚动条样式的选项，使它们在没有任何用户交互的情况下显示。因此，如果表格内容没有
浏览 15提问于2020-01-21得票数 0
BootStrap 5 我使用这个布局： <div class="row flex-nowrap"> <!</div> </div>
</div> main是主要内容区域(可滚动)。我试图在main中使用全屏模式，但它不应该是相对于viewport的，而
浏览 20提问于2021-09-18得票数 1
回答已采纳
1回答
我需要提供一个主-详细屏幕，其中主屏幕和详细屏幕都是可独立滚动的、在响应网格中并排的列。当浏览器宽度减小到某个阈值以下时，两列将堆叠在一起，只有一个整页滚动。理想情况下，我希望这在twitter-bootstrap中完成。看起来这应该很简单？
浏览 2提问于2013-02-11得票数 1
回答已采纳
2回答
我有一个使用Bootstrap3的固定页眉和页脚的页面。下面的内容可以滚动。用户可以通过F11或按钮(使用全屏-API)启用全屏模式。这在Chrome和FF中很好，但是在IE11中有问题。F11的全屏工作总是很好的。但是，使用javascript切换全屏模式会使我的页面在使用IE11时以缩小的宽度和高度放置在顶部底部。我的页眉和页脚保持原样。不幸的是，全屏不会在JSFiddle中切换，所以最好将代码复制到其他地方：
以下是网站的两张截
浏览 2提问于2015-11-06得票数 5
在我正在处理的一个bootstrap站点中，有两列我使其延伸到视窗的高度，然后任何溢出都会用滚动条来处理。这样，列就可以滚动，而不是改变页面的高度。问题是滚动条看起来真的很难看，特别是当有这么多滚动条的时候。有没有办法让滚动条看不见，同时保持列的可滚动？我知道有一些CSS，但它似乎与所有浏览器都不兼容，所以我想知道是否有解决办法。
浏览 15提问于2020-08-11得票数 0
回答已采纳
我有一个带bootstrap-vue项目的VueJS。将呈现选项卡列表，但它的宽度大于父级的宽度。所以我想要一对按钮来从左向右滚动列表。 我在我自己的项目中找到了这个例子。
浏览 17提问于2019-02-28得票数 2
回答已采纳
1回答
我使用的是bootstrap 4。我在一行中有3列。其中一列包含列表，其他两列不包含。我只希望包含列表的列是可滚动的，而不是整个容器，这意味着滚动条仅出现在该列中。
如果有任何帮助，我将不胜感激。
浏览 0提问于2018-04-13得票数 13
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
