我试图得到一个灵活的列布局使用Bootstrap与页眉和页脚区域采取自动高度和内容区域滚动.当我们在页脚和页眉列中插入组件时，它将占用组件的大小，其余空间将由内容区域占用.到目前为止，它运行得很好.但当我隐藏/删除previous button时，具有col-auto类的页脚高度对齐方式中断.请帮帮忙.
setTimeout(() => {
document.querySelector('.prev-btn').remove();
}, 2000);html,
body {
height: 100%;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid p-0 h-100">
<div class="row g-0 flex-column h-100">
<header class="col-auto bg-secondary">
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<div class="col d-flex align-items-center justify-content-center overflow-auto">
<div class="col-6 py-3 m-auto">
Content area
</div>
</div>
<footer class="col-auto">
<div class="container-fluid p-3 bg-light">
<div class="row g-0 align-items-center">
<div class="col">
<button class="btn fw-bold btn-outline-danger shadow-none">CANCEL & RESTART</button>
</div>
<div class="col-auto px-3 text-center">STEP 1 OF 4</div>
<div class="col">
<div class="d-flex justify-content-end">
<button class="btn fw-bold btn-outline-secondary px-5 me-3 shadow-none prev-btn">PREVIOUS</button>
<button class="btn fw-bold btn-outline-primary px-5 shadow-none">NEXT</button>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>