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

Bootstrap 4：响应式调整列高度以适应内容

聖光之護

发布： 2025-10-19 10:44:01

原创

371人浏览过

bootstrap 4：响应式调整列高度以适应内容

本文旨在解决Bootstrap 4中，在响应式布局下，当列内容较少、没有滚动条时，如何让列的高度自适应内容高度的问题。通过使用`@media`查询和`display: block!important`样式，可以在保持原有滚动条功能的同时，确保在内容较少时，列的高度正确显示。

在Bootstrap 4中，创建具有固定头部和底部，且内容区域包含可滚动列的布局是很常见的需求。然而，当内容较少，以至于不需要滚动条时，这些列可能会占据剩余的垂直空间，导致不期望的视觉效果。本文将介绍如何使用CSS媒体查询来解决这个问题，确保列的高度始终适应其内容，同时保留原有的滚动条功能。

问题描述

假设我们有一个包含头部、内容和底部的Bootstrap 4布局。内容区域被划分为两列，这两列都应该是可滚动的。当内容足够多时，滚动条应该出现，而当内容较少时，列的高度应该自动调整以适应内容，而不是占据整个可用空间。

解决方案

核心思路是使用CSS媒体查询来检测屏幕尺寸，并根据屏幕尺寸应用不同的样式。当屏幕尺寸较小，例如移动设备时，我们将使用display: block!important来覆盖Bootstrap的默认flexbox行为，从而使列的高度适应其内容。

步骤 1: 初始HTML结构

首先，我们创建一个基本的HTML结构，使用Bootstrap 4的类来设置布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Column Height</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>

登录后复制

在这个结构中：

AppMall应用商店

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

查看详情

container-fluid 占据整个视口，并使用 d-flex flex-column vh-100 设置为flex容器，垂直方向排列。
flex-shrink-0 确保头部和底部不会缩小。
flex-grow-1 使得内容区域占据剩余的垂直空间。
mh-100 和 overflow-auto 使列具有最大高度为100%和自动滚动条。

步骤 2: 添加媒体查询

接下来，我们添加一个媒体查询，当屏幕尺寸小于某个阈值时，将display: block!important 应用于包含列的行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Column Height</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-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>

登录后复制

在这个例子中，我们使用了 @media (max-width: 768px)，这意味着当屏幕宽度小于或等于768像素时，样式将被应用。你可以根据你的布局需求调整这个断点。