如何在 Bootstrap 5 中使用 Flex 进行此网站布局？答案

【问题标题】：How to do this website layout with Flex in Bootstrap 5?如何在 Bootstrap 5 中使用 Flex 进行此网站布局？
【发布时间】：2021-09-22 19:54:11
【问题描述】：

在我的最后一个问题中，我询问了如何使用 Bootstrap 中的 flex 为网站制作简单的布局。我得到了正确的解决方案，但现在我需要另一个网站的不同布局，我需要再次帮助。这是布局的外观计划：

Layout

我确信我必须使用 flex 来做到这一点，但我不能这样做，因为目前我对 flex 缺乏经验。请帮忙。

更新。这就是我得到的解决方案：

<!-- 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="flex-body">
    <div class="flex-row-1">
      <div class="col-3 blue"></div>
      <div class="col-9 orange"></div>
    </div>
    <div class="flex-row-2 grey"></div>
  </body>
</html>

/* test.css */

.blue
{
    background-color: blue;
}

.orange
{
    background-color: orange;
}

.grey
{
    background-color: grey;
}

html, body
{
    height: 100%;
}

.row
{
    margin-left:0;
    margin-right:0;
}

.flex-body
{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flex-row-1
{
    display: flex;
    flex: 1;
}

.flex-row-2
{
    display: flex;
    min-height: 35%;
    margin-bottom: auto;
}

【问题讨论】：

标签： flexbox bootstrap-5

【解决方案1】：

您可以使用引导网格系统、css flex 或只提供 w-25、w-50、w-70 我建议使用网格系统来承担很大的责任你更喜欢哪一个？

【讨论】：

如果您能同时发布这两种解决方案，那就太好了。否则我会更喜欢flex。不过要提一下，最重要的是两行的高度都覆盖了浏览器窗口的100% :)