如何使Bootstrap列内子行高度匹配父列高度？

安全阿岳

2026-8-5

问题描述

无法找到让子内容填满列高度的方法，已尝试使用Bootstrap网格系统和flex工具类。唯一有效的方法是将行高设置为50%，但问题在于列内的行数不确定（可能是1、2或3行）。

期望效果

可行代码（硬编码行高实现）

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
        <style>
            .c1{
                background-color: red;
            }
            .c2{
                background-color: rgb(98, 0, 255);
            }
            .c3{
                background-color: rgb(101, 255, 160);
            }
            .c4{
                background-color: rgb(72, 255, 0);
            }
            .c5{
                background-color: rgb(0, 255, 242);
            }
            .c6{
                background-color: rgb(255, 238, 0);
            }
            .r0{
                background-color: rgb(133, 133, 133);
            }
            .ra{
                background-color: rgb(255, 123, 0);
                height: 50%;
            }
            .rb{
                background-color: rgb(72, 255, 0);
                height: 50%;
            }
            .rc{
                background-color: rgb(255, 0, 191);
            }
            .rd{
                background-color: rgb(240, 255, 24);
            }
            .re{
                background-color: rgb(111, 133, 255);
            }
            .rf{
                background-color: rgb(180, 57, 57);
                height: 50%;
            }
            .rg{
                background-color: rgb(91, 206, 110);
                height: 50%;
            }
        </style>
    </head>
    <body>
        <div class="container py-3">
        <div class="row r0">
            <div class="col c1">
                <div class="row ra">a</div>
                <div class="row rb">b</div>
            </div>
            <div class="col c2">2</div>
            <div class="col c3">3</div>
            <div class="col c4">
                <div class="row rc">c</div>
                <div class="row rd">d</div>
                <div class="row re">e</div>
            </div>
            <div class="col c5">
                <div class="row rf">f</div>
                <div class="row rg">g</div>
            </div>
        </div>
        </div>
    </body>
</html>

尝试过的代码（未设置固定行高）

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
        <style>
            .c1{
                background-color: red;
            }
            .c2{
                background-color: rgb(98, 0, 255);
            }
            .c3{
                background-color: rgb(101, 255, 160);
            }
            .c4{
                background-color: rgb(72, 255, 0);
            }
            .c5{
                background-color: rgb(0, 255, 242);
            }
            .c6{
                background-color: rgb(255, 238, 0);
            }
            .r0{
                background-color: rgb(133, 133, 133);
            }
            .ra{
                background-color: rgb(255, 123, 0);
            }
            .rb{
                background-color: rgb(72, 255, 0);
            }
            .rc{
                background-color: rgb(255, 0, 191);
            }
            .rd{
                background-color: rgb(240, 255, 24);
            }
            .re{
                background-color: rgb(111, 133, 255);
            }
            .rf{
                background-color: rgb(180, 57, 57);
            }
            .rg{
                background-color: rgb(91, 206, 110);
            }
        </style>
    </head>
    <body>
        <div class="container py-3">
        <div class="row r0">
            <div class="col c1">
                <div class="row ra">a</div>
                <div class="row rb">b</div>
            </div>
            <div class="col c2">2</div>
            <div class="col c3">3</div>
            <div class="col c4">
                <div class="row rc">c</div>
                <div class="row rd">d</div>
                <div class="row re">e</div>
            </div>
            <div class="col c5">
                <div class="row rf">f</div>
                <div class="row rg">g</div>
            </div>
        </div>
        </div>
    </body>
</html>

当前得到的结果

当前结果

解决方案

不需要硬编码行高，给包含子行的列添加 d-flex flex-column 类，再给每个子行添加 flex-grow-1 类，就能让子元素自动填满列的高度，适配1、2或3行的情况：

修改后核心代码

<div class="col c1 d-flex flex-column">
    <div class="row ra flex-grow-1">a</div>
    <div class="row rb flex-grow-1">b</div>
</div>
<div class="col c4 d-flex flex-column">
    <div class="row rc flex-grow-1">c</div>
    <div class="row rd flex-grow-1">d</div>
    <div class="row re flex-grow-1">e</div>
</div>
<div class="col c5 d-flex flex-column">
    <div class="row rf flex-grow-1">f</div>
    <div class="row rg flex-grow-1">g</div>
</div>

完整代码

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
        <style>
            .c1{
                background-color: red;
            }
            .c2{
                background-color: rgb(98, 0, 255);
            }
            .c3{
                background-color: rgb(101, 255, 160);
            }
            .c4{
                background-color: rgb(72, 255, 0);
            }
            .c5{
                background-color: rgb(0, 255, 242);
            }
            .c6{
                background-color: rgb(255, 238, 0);
            }
            .r0{
                background-color: rgb(133, 133, 133);
            }
            .ra{
                background-color: rgb(255, 123, 0);
            }
            .rb{
                background-color: rgb(72, 255, 0);
            }
            .rc{
                background-color: rgb(255, 0, 191);
            }
            .rd{
                background-color: rgb(240, 255, 24);
            }
            .re{
                background-color: rgb(111, 133, 255);
            }
            .rf{
                background-color: rgb(180, 57, 57);
            }
            .rg{
                background-color: rgb(91, 206, 110);
            }
        </style>
    </head>
    <body>
        <div class="container py-3">
        <div class="row r0">
            <div class="col c1 d-flex flex-column">
                <div class="row ra flex-grow-1">a</div>
                <div class="row rb flex-grow-1">b</div>
            </div>
            <div class="col c2">2</div>
            <div class="col c3">3</div>
            <div class="col c4 d-flex flex-column">
                <div class="row rc flex-grow-1">c</div>
                <div class="row rd flex-grow-1">d</div>
                <div class="row re flex-grow-1">e</div>
            </div>
            <div class="col c5 d-flex flex-column">
                <div class="row rf flex-grow-1">f</div>
                <div class="row rg flex-grow-1">g</div>
            </div>
        </div>
        </div>
    </body>
</html>

原理说明

d-flex flex-column 将列设置为垂直方向的flex容器，子元素沿垂直方向排列
flex-grow-1 让每个子行自动分配容器的剩余空间，无论子元素数量多少，都会均匀填满整个列的高度

内容的提问来源于stack exchange，提问作者GeCe

如何使Bootstrap列内子行高度匹配父列高度？

期望效果 #

可行代码（硬编码行高实现） #

尝试过的代码（未设置固定行高） #

当前得到的结果 #

解决方案 #