Bootstrap响应式24列布局：如何填充剩余垂直空间？

核心问题是小屏时嵌套的row结构导致高度分配异常，我们可以通过调整布局结构，利用Bootstrap的响应式flex类实现不同屏幕下的布局适配：

1. 重构外层布局逻辑：将原本嵌套在同一row内的按钮组和钢琴卷帘，在小屏时拆分为独立的flex项，大屏时合并为一行的两列结构。
2. 精细化高度分配：针对不同屏幕尺寸，给需要自适应高度的容器添加响应式的flex-grow类，确保剩余空间被合理分配。

修改后的代码 #

CSS 部分

#root {
    height: 100vh;
    padding: .25rem;
}
/* 大屏时的上半区容器，占据全部剩余高度 */
.growing-container-md {
    flex-grow: 1;
    min-height: 0;
    overflow: hidden;
}
/* 小屏时每个模块的自适应高度控制 */
.growing-item-sm {
    flex-grow: 1;
    min-height: 0;
    overflow: hidden;
}
.pianoroll {
    overflow: hidden;
    display: inline-block;
}
.notYetReady {
    opacity: .5;
    pointer-events: none;
}

HTML 部分

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div id="root">
<div class="container-md text-center border h-100">
    <div class="App h-100 d-flex flex-column">
        <!-- 响应式容器：大屏横向排列，小屏纵向排列 -->
        <div class="d-flex flex-md-row flex-column growing-container-md">
            <!-- 左侧按钮组区域：大屏占6列，小屏占满宽度 -->
            <div class="col-12 col-md-6 d-flex flex-column">
                <div class="row row-cols-1 row-cols-md-3 h-100">
                    <div class="col flex-grow-1 list-group p-2 growing-item-sm">
                        <div class="list-group-item list-group-item-secondary text-uppercase">Record</div>
                        <div class="list-group-item h-100"><button class="btn btn-outline-success w-100 h-100">Start</button></div>
                    </div>
                    <div class="col flex-grow-1 list-group p-2 notYetReady growing-item-sm">
                        <div class="list-group-item list-group-item-secondary text-uppercase">Stop</div>
                        <div class="list-group-item h-100"><button class="btn btn-outline-warning w-100 h-100">Stop</button></div>
                    </div>
                    <div class="col flex-grow-1 list-group p-2 growing-item-sm">
                        <div class="list-group-item list-group-item-secondary text-uppercase">Save</div>
                        <div class="list-group-item h-100"><button class="btn btn-outline-primary w-100 h-100">Save</button></div>
                    </div>
                </div>
            </div>
            <!-- 右侧钢琴卷帘区域：大屏占6列，小屏占满宽度 -->
            <div class="col-12 col-md-6 list-group p-2 growing-item-sm">
                <div class="list-group-item list-group-item-secondary text-uppercase">Your Pitch</div>
                <div class="list-group-item h-100 overflow-auto">
                    <div class="pianoroll">
                        <div style="height: 2000px; background-color: red">A lot of content...</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部控制行 -->
        <div class="row">
            <div class="col list-group list-group-horizontal p-2">
                <div class="list-group-item list-group-item-secondary text-uppercase">Sensitivity</div>
                <div class="list-group-item w-100 d-flex"><span class="flex-fill"><input type="range" class="form-range liveSensitivitySlider" style="--inputRMS:0%;"></span></div>
                <div class="list-group-item"><button class="btn btn-outline-primary w-100 h-100">Settings</button></div>
            </div>
        </div>
    </div>
</div>
</div>

关键调整说明 #

• 用d-flex flex-md-row flex-column替代嵌套row结构，让容器在大屏时横向分布、小屏时纵向堆叠，避免嵌套布局导致的高度计算错误。
• growing-container-md确保大屏时上半区整体占据剩余高度，growing-item-sm让小屏时每个模块（三个按钮组+钢琴卷帘）均匀分配剩余空间，不会出现单个模块过长的问题。
• row-cols-1 row-cols-md-3简化按钮组的响应式排列，小屏时每行一个按钮组，大屏时每行三个，无需额外嵌套控制。

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