强制同一行的引导程序列无法均匀调整高度

由 发布于

在阅读了大约2个小时的其他问题并尽力解决问题后，我向所有人投降。

目前我有这个：

Actual code

我想知道是否可以这样做：

Projected result

当前网格是3行，第二/中间是3列。第一和第三包含两行。 如您所见，我希望左右列不适应中间位置的高度。

body {
    padding-top: 15px;
}

[class*="col-"] {
    background-color: rgb(250, 127, 127);
    border: 2px solid black;
    border-radius: 10px;
    text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style type="text/css">
  .col-lg-8 { line-height: 200px; }
  .col-lg-12 { line-height: 80px; }
</style>

<div class="container">
    <header class="row">
        <div class="col-lg-12">
            Entete
        </div>
    </header>
    <div class="row">
        <div class="col-lg-2">
            <div class="row">
                <aside class="col-lg-12">
                    Aside
                </aside>
                <aside class="col-lg-12">
                    Aside
                </aside>
            </div>
        </div>
        <section class="col-lg-8">
            Section
        </section>
        <div class="col-lg-2">
            <div class="row">
                <aside class="col-lg-12">
                    Aside
                </aside>
                <aside class="col-lg-12">
                    Aside
                </aside>
            </div>
        </div>
    </div>
    <footer class="row">
        <div class="col-lg-12">
            Pied de page
        </div>
    </footer>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>