Bootstrap 4行填充剩余高度
基础概念
Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。Bootstrap 4 提供了一系列的 CSS 类和 JavaScript 插件，帮助开发者轻松地创建复杂的布局和交互效果。
相关优势
- 响应式设计：Bootstrap 4 提供了强大的栅格系统，能够自动适应不同屏幕尺寸。
- 丰富的组件：包括导航栏、按钮、表单、模态框等，可以快速构建用户界面。
- 易于定制：可以通过 Sass 变量和混合宏轻松定制样式。
- 良好的文档和社区支持：Bootstrap 有详细的文档和活跃的社区，便于学习和解决问题。
类型
Bootstrap 4 的行填充剩余高度可以通过多种方式实现，以下是几种常见的方法：
方法一：使用 Flexbox
Bootstrap 4 基于 Flexbox，可以利用 Flexbox 的特性来实现行填充剩余高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Flexbox Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.full-height {
height: 100vh;
}
</style>
</head>
<body>
<div class="container-fluid full-height d-flex flex-column">
<div class="row flex-grow-1 bg-light">
<div class="col">
This row will take up the remaining height.
</div>
</div>
<div class="row bg-dark text-white">
<div class="col">
Fixed height row.
</div>
</div>
</div>
</body>
</html>方法二：使用 CSS Grid
虽然 Bootstrap 4 主要基于 Flexbox，但也可以结合 CSS Grid 来实现更复杂的布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 CSS Grid Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.full-height {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
.middle {
background-color: lightgray;
}
</style>
</head>
<body>
<div class="container-fluid full-height">
<div class="row">
<div class="col">
Header
</div>
</div>
<div class="row middle">
<div class="col">
This row will take up the remaining height.
</div>
</div>
<div class="row">
<div class="col">
Footer
</div>
</div>
</div>
</body>
</html>应用场景
这种布局方式常用于需要一个固定高度的顶部或底部导航栏，而中间内容区域需要填充剩余高度的场景，例如仪表盘、管理后台等。
常见问题及解决方法
问题：行没有填充剩余高度
原因：可能是没有正确设置容器的高度或 Flexbox 属性。
解决方法：
- 确保父容器的高度设置为
100vh或其他固定高度。 - 使用
flex-grow-1类来使行填充剩余高度。
<div class="container-fluid full-height d-flex flex-column">
<div class="row flex-grow-1 bg-light">
<div class="col">
This row will take up the remaining height.
</div>
</div>
</div>问题：行内元素高度不一致
原因：可能是行内元素的默认高度不一致。
解决方法：
- 使用 Bootstrap 的
align-items类来对齐行内元素。 - 手动设置行内元素的高度。
<div class="container-fluid full-height d-flex flex-column align-items-stretch">
<div class="row flex-grow-1 bg-light">
<div class="col">
This row will take up the remaining height and align items vertically.
</div>
</div>
</div>参考链接
通过以上方法，你可以轻松实现 Bootstrap 4 中行填充剩余高度的效果。
相关·内容
1回答
所以我使用了bootstrap grid，当div没有像这样填满整个高度时，我遇到了处理空白空间的问题当我有这样的配置时 <div class="
浏览 2提问于2019-01-20得票数 1
1回答
我的网页使用Bootstrap版本3。class="col-lg-6 pull-right"> </div>我需要id为"fillAvailableSpace“的div来填充屏幕的可用高度如何使用Bootstrap填充页面的剩余可用高度？
浏览 0提问于2015-02-27得票数 9
回答已采纳
3回答
我正在努力使a行伸展以填满剩余的可用高度。我尝试将h-100添加到row类中，但这会导致屏幕底部出现空白。
浏览 3提问于2018-05-10得票数 41
回答已采纳
1回答
粘性页脚中的液体高度
、、、
我在我的项目中使用了bootstrap sticky：
是否可以设置内容高度以填充剩余空间？让我解释一下。我想居住的形象，我需要它的大小与可用高度相关。
浏览 2提问于2013-02-08得票数 0
回答已采纳
使用twitter bootstrap (2)，我有一个带有导航栏的简单页面，我想在container中添加一个高度为100%的div (在屏幕底部)。100%; height: 100%; min-height: 100%;编辑 *
我已经按照下面的建议向fill类添加了高度但是，问题是我在正文中添加了一个填充顶部，以说明顶部固定的导航栏。这会影响"map“div的100%高度，并意味着会添加一个滚动条--如下所示：
浏览 51提问于2012-07-27得票数 149
回答已采纳
1回答
th>ID</th></tr> <tbody id="songs"> </table>div是Bootstrapdiv上的gv-left类为height: 95vh;的div定义了固定的高度。tbody由一个包含内容的JavaScript函数(tr / td)填充</
浏览 2提问于2016-10-08得票数 2
1回答
关于如何让Textarea的高度达到100%，我看到了很多不同的回应。我知道在textarea上使用" height : 100%“会自动调整到容器的高度。我使用的是bootstrap 4 alpha6 (但我认为解决方案也适用于bootstrap 3)，我有两个表单控件，从上到下排列，文本区是最后一个控件，底部有一个提交按钮。使用bootstrap，我有很深的html结构，并使用vuejs组件组装我的页面。所以，我尽量避免将从body开始的每个容器都设置为height=100%，直到我到达文本
浏览 23提问于2017-02-06得票数 1
我试图让bootstrap列中的一个文本区域用CCS (无JS)填充列的剩余高度。<div class="form-row"> <divbr> some random stuff<br> so
浏览 12提问于2020-02-06得票数 0
回答已采纳
3回答
有没有一个bootstrap类可以填充那些尚未被获取的列？例如，我有一个div标签，它可能在那里，如果它不在那里，它可能不会，我希望第二个div占据12列，但如果它在那里，它只占据8列。
浏览 1提问于2014-09-17得票数 4
回答已采纳
我希望能够设置父行的高度或最大高度，并让子行填充可用的空间。我想要填充的子行，这样顶部的子行就会根据其内容增长到任何高度，所以没有什么特别的，但是底部的子行填充了父行中存在的任何可用的剩余垂直空间。这里有一个jsfiddle，它显示了我的行和列，但是底部的子行(我已经设置为100%高度)在父行的边界之外展开。我认为高度被设置为父空间的100%，而不是可用空间的100%，这正是我所追求的。知道如何才能让底部的行占用剩余
浏览 4提问于2019-10-30得票数 0
回答已采纳
2回答
我在使用navbar品牌时遇到了麻烦，包括我的标志。首先，我使用的是最新的引导CSS (getbootstrap.com)，问题也可以在这里看到:每当包含徽标时，导航栏都有点大。如果我只使用文字，那就很好了。您可以看到在导航元素下悬停导航条元素时，它仍然显示出“较浅”的颜色(所以没有悬停区域)。下面的代码是我遇到问题的导航栏的一部分：&
浏览 5提问于2014-03-15得票数 0
回答已采纳
1回答
Div填充剩余高度
、、、
我有两个div，bottom上的那个内容扩展到最高。页面为100%高/宽position absolute body, html { height:100%, width:100% } .bottom { position absolute; bottom: 0; right: 0; left: 0; }
.top { position absolute; bottom: 0;
浏览 1提问于2014-08-27得票数 1
对于CoordinatorLayout，如果它包含两个视图，并且其中一个视图停靠在底部的layout_gravity="bottom"上，我可以让另一个视图填充剩余的高度吗？例如，如果屏幕高度为1000dp，底部视图的高度为300dp，则另一个视图的高度应为700dp。
浏览 30提问于2018-02-28得票数 5
1回答
我希望我的导航锚的填充是留在导航中的。我已经将它设置为有一个max-height: 90px;。我不想做的是像padding: 36px 0;一样对它们应用固定的填充。
浏览 11提问于2019-07-13得票数 0
如何设置一个“间隔”div来填充内容和页脚之间的剩余高度空间，这样页脚将始终位于页面的底部(而不是最初要求的窗口)？我尝试过很多方法，比如创建一个div，并将其设置为最小高度，高度为100%等等。你能帮我设置jQuery来计算它的高度来填充剩余的空间吗？有没有更好的解决方案？
非常感谢，Graxa
浏览 0提问于2012-03-05得票数 0
2回答
不确定这是否可能，但我想有一个图像填充的整个宽度和高度的跨度使用Twitter Bootstrap。
我有一个宽度为span4的侧边栏，剩余的跨度为8，还有一张图片。我尝试使用了background:cover类，但是它只会填充跨度的宽度，而高度只会在我指定一个高度时填充。
浏览 0提问于2013-07-08得票数 2
回答已采纳
我有3个图像垂直对齐在固定高度的div。如何确保即使在添加或删除图像时，它们之间的顶部和底部填充也保持不变。类似地，当添加另一个图像时，剩余的20px应该是所有图像之间的总填充。
属性: vertical-align: middle在这里不起作用。
浏览 4提问于2012-09-04得票数 6
回答已采纳
1回答
我正在玩引导4，我不知道如何正确地获得我的高度。我有一个“侧导航”，“头”，“主”和“页脚”。 <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&g
浏览 0提问于2018-03-31得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
对象存储
云直播活动推荐
腾讯云开发者
