如何在Bootstrap 5中使用Flex实现指定网站布局？

以下是经过验证可直接运行的实现方案，优先复用Bootstrap内置工具类，减少冗余自定义代码：

优化后HTML代码 #

<!-- test.html -->
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../../lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="test.css">
  </head>
  <body class="d-flex flex-column vh-100">
    <!-- 上部分占剩余全部高度 -->
    <div class="row flex-grow-1 g-0 m-0">
      <div class="col-3 blue"></div>
      <div class="col-9 orange"></div>
    </div>
    <!-- 下部分固定最小高度35% -->
    <div class="grey" style="min-height: 35%"></div>
  </body>
</html>

优化后CSS代码 #

/* test.css */
.blue {
    background-color: blue;
}
.orange {
    background-color: orange;
}
.grey {
    background-color: grey;
}

如果需要保留你原有自定义类的写法，只需要对你的代码做以下2处修改即可正常运行：

• 给.flex-row-1添加width: 100%属性，或者给该元素加上Bootstrap的row类
• 删除.flex-row-2中的margin-bottom: auto属性，该属性会挤压上部分布局高度

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