Принудительно bootstrap столбцы одного ряда, чтобы неравномерно отрегулировать высоту

Question

Прочитав другие вопросы здесь в течение примерно 2 часов и изо всех сил пытаясь решить мою проблему, я сдаюсь всем вам.

В настоящее время у меня есть это:

Фактический код

И я хочу знать, возможно ли это сделать:

Прогнозируемый результат

Текущая сетка состоит из 3 строк, а на втором / средний, есть 3 столбца. 1-й и 3-й содержат 2 строки. Как видите, я хочу, чтобы левый и правый столбцы не соответствовали высоте среднего.

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>

Answer 1

Если вы задаете значение фиксированной высоты для своей строки, это возможно (если опция фиксированной высоты):

body {
    padding-top: 15px;
}

[class*="col-"] {
    background-color: rgb(250, 127, 127);
    border: 2px solid black;
    border-radius: 10px;
    text-align: center;
}

.fix-height {
  height: 400px;
}

.fix-height .col-lg-2,
.fix-height .row{
  height: 100%;
}

<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 fix-height">
        <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>

Answer 2

Вот простой

.col-lg-2 {
    height: fit-content;
}

ИЛИ

используйте <div class="col-lg-2 h-100"> вместо <div class="col-lg-2">

.col-lg-2 растягивал свою высоту в соответствии с его родительским элементом, который является строкой над ним.

Answer 3

просто добавьте h-100 к col-lg-2, чтобы получить только full высоту, а дополнительная высота будет пустой

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 h-100">
            <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 h-100">
            <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>