Bootstrap 4：响应式列高度自适应内容-html教程-PHP中文网

Bootstrap 4：响应式列高度自适应内容

心靈之曲

发布： 2025-10-19 09:08:19

原创

960人浏览过

bootstrap 4：响应式列高度自适应内容

本文介绍了如何在使用 Bootstrap 4 构建响应式布局时，使两列在移动设备上折叠成一列后，其高度能够根据内容自适应。核心在于利用 `@media` 查询，在特定屏幕尺寸下，强制将 `row` 元素的 `display` 属性设置为 `block!important`，从而解决列高度平均分配的问题，确保内容较少的列也能正确显示。

在使用 Bootstrap 4 创建响应式布局时，经常会遇到需要在不同屏幕尺寸下调整列的排列方式。一种常见的需求是在桌面端并排显示两列，而在移动端将它们折叠成一列。然而，当内容较少时，折叠后的列可能会出现高度不正确的问题，导致视觉效果不佳。本文将详细介绍如何解决这个问题，确保列的高度始终根据内容自适应。

问题描述

假设我们有一个包含头部、内容区域和底部的布局，内容区域包含两列，并且这两列需要支持滚动。在桌面端，我们希望这两列并排显示，并且可以独立滚动。在移动端，我们希望这两列折叠成一列，垂直排列。

以下是一个基本的 HTML 结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Responsive Columns</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <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">
            Header
        </div>
        <div class="row flex-grow-1 overflow-hidden">
            <div class="col-6 mh-100 overflow-auto">
                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>
            </div>
            <div class='col-6 mh-100 overflow-auto'>
                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>
            </div>
        </div>
        <div class="row border flex-shrink-0">
            Footer
        </div>
    </div>
</body>
</html>

登录后复制

在上述代码中，我们使用了 Bootstrap 4 的类来创建布局。container-fluid 类用于创建一个全宽的容器，d-flex 和 flex-column 类用于创建一个垂直的 flex 容器，vh-100 类用于设置容器的高度为视口高度。row 类用于创建行，col-6 类用于创建占据一半宽度的列，mh-100 类用于设置列的最小高度为 100%，overflow-auto 类用于在内容超出列的高度时显示滚动条。flex-grow-1 使内容区域可以占据剩余的空间。

当内容较少，没有滚动条时，这两列可能会平均分配高度，导致显示不正确。

解决方案

为了解决这个问题，我们可以使用 @media 查询，在移动端强制将 row 元素的 display 属性设置为 block!important。这样可以覆盖 Bootstrap 默认的 flex 布局，使列的高度根据内容自适应。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

以下是修改后的 CSS 代码：

html,
body {
  height: 100%;
}

@media (max-width: 768px) {
  .row.flex-grow-1 {
    display: block !important;
  }
}

登录后复制

在这个 CSS 代码中，我们使用了 @media (max-width: 768px) 查询，表示当屏幕宽度小于等于 768 像素时，应用以下样式。我们将 row 元素的 display 属性设置为 block !important，强制覆盖 Bootstrap 默认的 flex 布局。

以下是修改后的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Responsive Columns</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <style>
        html, body {
            height: 100%;
        }

        @media (max-width: 768px) {
          .row.flex-grow-1 {
            display: block !important;
          }
        }
    </style>
</head>
<body>
    <div class="container-fluid d-flex flex-column vh-100">
        <div class="row border flex-shrink-0">
            Header
        </div>
        <div class="row flex-grow-1 overflow-hidden">
            <div class="col-12 overflow-visible">
                Hello
            </div>
            <div class='col-12 overflow-visible'>
                World
            </div>
        </div>
        <div class="row border flex-shrink-0">
            Footer
        </div>
    </div>
</body>
</html>

登录后复制

在这个 HTML 代码中，我们将 col-6 类修改为 col-12 类，使列在移动端占据全部宽度。同时，我们将 overflow-auto 类修改为 overflow-visible 类，允许内容超出列的高度。