本文旨在解决 Bootstrap 4 响应式布局中，当两列在移动端折行（`col-12`）时，由于父容器 `flex-grow-1` 导致列高度无法自适应内容，而是均分可用空间的问题。核心解决方案是在移动端通过 `@media` 查询将包含列的 `row` 元素强制设置为 `display: block!important`，从而使列恢复块级流特性，高度根据自身内容自动调整，同时不影响桌面端布局和滚动功能。
引言：Bootstrap 响应式布局中的列高度挑战
在现代 Web 开发中，响应式设计是不可或缺的一环。Bootstrap 框架以其强大的栅格系统和 Flexbox 实用工具类，极大地简化了响应式布局的实现。然而，在特定场景下，如需要将页面垂直方向撑满，并使内容区域可滚动，同时又要确保在不同屏幕尺寸下（尤其是列折行时）列的高度能自适应其内容，可能会遇到一些挑战。
通常，我们会利用 d-flex、flex-grow-1 和 vh-100 等类来创建一个全高布局，并使某些区域弹性增长。但在移动设备上，当两列从并排布局（如 col-6）折叠成单列布局（col-12）时，如果其父 row 仍然保持 Flexbox 行为并带有 flex-grow-1，则子列可能会均分可用高度，而非根据自身内容调整高度，这通常不是我们期望的行为。
问题剖析：折行列的高度自适应困境
考虑一个典型的 Bootstrap 4 布局：一个全高页面，包含页眉、页脚和一个占据剩余垂直空间的中间内容区域。内容区域内部又分为左右两列，在桌面端并排显示，且各自内容过长时可独立滚动。
以下是桌面端两列并排且可滚动的基本结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>桌面端两列布局</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
html, body {
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid d-flex flex-column vh-100">
<div class="row border flex-shrink-0">
<div class="col-12 p-2">Header</div>
</div>
<div class="row flex-grow-1 overflow-hidden">
<div class="col-6 mh-100 overflow-auto border-right p-2">
<p>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></p>
</div>
<div class='col-6 mh-100 overflow-auto p-2'>
<p>World<br>World<br>World<br>World<br>World<br>World<br>World<br>
World<br>World<br>World<br>World<br>World<br>World<br>World<br>
World<br>World<br>World<br>World<br>World<br>World<br>World<br></p>
</div>
</div>
<div class="row border flex-shrink-0">
<div class="col-12 p-2">Footer</div>
</div>
</div>
</body>
</html>当屏幕尺寸变小，列需要折行时，我们通常会将 col-6 改为 col-12。如果此时包含这些列的 row 元素仍保持 display: flex (因为 row 默认就是 Flex 容器)，并且带有 flex-grow-1，那么即使列的内容很短，它们也会尝试均分父 row 的可用高度。
考虑以下移动端布局的尝试，当内容短时，两列各自占据 50% 的高度，而非自适应内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端问题复现</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
html, body {
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid d-flex flex-column vh-100">
<div class="row border flex-shrink-0">
<div class="col-12 p-2">Header</div>
</div>
<!-- 问题所在：row 仍是 flex 容器，flex-grow-1 导致子列均分高度 -->
<div class="row flex-grow-1 mh-100 overflow-auto">
<div class="col-12 overflow-visible border-bottom p-2">
Hello <!-- 内容很短 -->
</div>
<div class='col-12 overflow-visible p-2'>
World <!-- 内容很短 -->
</div>
</div>
<div class="row border flex-shrink-0">
<div class="col-12 p-2">Footer</div>
</div>
</div>
</body>
</html>在此示例中，即使 "Hello" 和 "World" 内容很短，它们所在的 col-12 元素仍会各自占据中间 row 区域的 50% 高度，而不是根据内容自适应。这破坏了预期的布局效果。
解决方案：利用 display: block 实现高度自适应
解决此问题的关键在于理解 Flexbox 的工作原理。当父 row 是 display: flex 时，其子元素（col- 类）作为 Flex Item 会受到 Flexbox 布局规则的影响。特别是当 flex-grow-1 应用于父 row 时，子列会尝试在可用空间内伸展或收缩。
我们的目标是：在移动端，当列折行时，让它们恢复标准的块级流行为，即高度由其内容决定。这可以通过在特定断点下，将包含列的 row 元素从 display: flex 切换为 display: block 来实现。display: block 会移除 Flexbox 容器的特性，使 col-12 元素作为普通的块级元素垂直堆叠，并自然地根据其内容撑开高度。
实现方法与代码实践
要实现这一目标，我们需要利用 CSS 的 @media 查询来针对不同的屏幕尺寸应用不同的样式。具体来说，我们可以在小屏幕断点下，为中间内容区域的 row 元素添加一个自定义类，并将其 display 属性设置为 block!important，以覆盖 Bootstrap 默认的 Flexbox 行为。
首先，在您的自定义 CSS 文件中添加以下媒体查询规则：
/* custom.css */
@media (max-width: 767.98px) { /* 针对 Bootstrap 的 'sm' 断点及以下 */
/* 覆盖 row 的 display: flex 行为，使其在小屏幕下变为 block */
.row-responsive-block {
display: block !important;
}
}然后，将这个自定义类 row-responsive-block 添加到您的 HTML 结构中，位于 flex-grow-1 mh-100 overflow-auto 所在的 row 元素上。
以下是应用了解决方案后的完整 HTML 结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 响应式列高度自适应教程</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
html, body {
height: 100%;
}
/* 自定义 CSS，确保在 Bootstrap CSS 之后加载 */
@media (max-width: 767.98px) { /* 针对 Bootstrap 的 'sm' 断点及以下 */
.row-responsive-block {
display: block !important;
}
}
</style>
</head>
<body>
<div class="container-fluid d-flex flex-column vh-100">
<div class="row border flex-shrink-0">
<div class="col-12 p-2">Header</div>
</div>
<!-- 关键修改：在移动端通过 row-responsive-block 类应用 display: block!important -->
<div class="row row-responsive-block flex-grow-1 mh-100 overflow-auto">
<div class="col-12 overflow-visible border-bottom p-2">
<!-- 内容较长时，整个 row 会出现滚动条 -->
<p>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></p>
</div>
<div class='col-12 overflow-visible p-2'>
<p>World<br>World<br>World<br>World<br>World<br>World<br>World<br>
World<br>World<br>World<br>World<br>World<br>World<br>World<br>
World<br>World<br>World<br>World<br>World<br>World<br>World<br></p>
</div>
</div>
<div class="row border flex-shrink-0">
<div class="col-12 p-2">Footer</div>
</div>
</div>
</body>
</html>效果验证：
当内容较长时（移动端）： 将浏览器宽度调整到小于 768px。此时，row-responsive-block 类生效，row 变为 display: block。col-12 元素会垂直堆叠。由于 row 本身带有 flex-grow-1 mh-100 overflow-auto，如果所有 col-12 内容的总高度超出了 row 的可用高度，则整个 row 区域将出现滚动条，保持了原有的滚动功能。
-
当内容较短时（移动端）： 将浏览器宽度调整到小于 768px，并修改内容为短文本。
<!-- ... 省略其他部分 ... --> <div class="row row-responsive-block flex-grow-1 mh-100 overflow-auto"> <div class="col-12 overflow-visible border-bottom p-2"> Hello <!-- 内容很短 --> </div> <div class='col-12 overflow-visible p-2'> World <!-- 内容很短 --> </div> </div> <!-- ... 省略其他部分 ... -->在这种情况下，col-12 元素的高度将完全由其内容决定，不再均分可用空间。它们会紧密堆叠，只占据所需的垂直高度。
通过这种方式，我们既解决了移动端列高度自适应的问题，又保留了桌面端 Flexbox 布局的优势以及内容区域的滚动功能。
注意事项
- !important 的使用： !important 关键字在这里是必要的，因为 Bootstrap 的实用工具类（如 d-flex）通常具有较高的优先级。使用 !important 可以确保我们的自定义样式能够成功覆盖它。
- 断点选择： 示例中使用了 max-width: 767.98px，这对应 Bootstrap 的 sm（小屏幕）断点。您可以根据您的具体设计需求，选择更合适的断点，例如 md（中等屏幕）或 lg（大屏幕）等。
- overflow 属性： 确保 col-12 元素本身设置为 overflow-visible，这样它们的内容才能自然撑开高度。而父 row 上的 overflow-auto 和 mh-100 负责在内容过多时，使整个折叠区域可滚动。
- CSS 加载顺序： 确保您的自定义 CSS 文件在 Bootstrap 的 CSS 文件之后加载，这样您的样式才能正确覆盖 Bootstrap 的默认样式。
总结
在 Bootstrap 4 响应式布局中，实现折行列的高度自适应内容是一个常见的需求。通过在移动端断点下，巧妙地将包含列的 row 元素从 display: flex 切换为 display: block!important，我们可以让列恢复标准的块级流行为，从而使其高度根据自身内容自动调整。这种方法既保持
