Bootstrap 4: каждый ряд заполняет одинаковое количество высоты

Question

Я делаю предварительный загрузчик и борюсь со строками. Я хочу, чтобы мой серый прямоугольник был заполнен 3 рядами по 33% высоты.

Тогда мне нужно:

• в строке 1, логотип svg
• в ряду 2, загрузчик
• в строке 3, немного текста

Вот что я хочу:

Вот мой код:

#loader-modal {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(0,0,0, 0.9);
    z-index: 100000;
}

.rectangle-chargement {
    width: 25%;
    height: 50%;
    top: 25%;
    left: 37.5%;
    position: absolute;
    background-color: #E2E2E2;
    border-radius: 0.15rem;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>



<div id="loader-modal">
    <div class="d-flex justify-content-center mx-auto rectangle-chargement">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <!--<svg width="100%" >My SVG</svg>-->
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="d-flex justify-content-center" id="loader-circulaire">
                        <div id="chargement-loader"></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <p class="d-flex justify-content-center mx-auto patienter-chargement">Veuillez patienter ...</p>
                </div>
            </div>
        </div>
    </div>
</div>

Ребята, вы знаете, как сделать это чище? (и рабочий конечно)

Answer 1

Вы, конечно, можете жестко задавать высоту, но, поскольку вы спрашиваете, есть ли какой-нибудь более чистый способ сделать это, я считаю, что нужно использовать flexbox с направлением потока столбца, и пусть flexbox дети растут, устанавливая их flex-grow в 1.

Этот способ не требует жесткого кодирования высоты для каждой строки и позволяет вам иметь столько строк, сколько вы «захотите».

<div class="rectangle-chargement d-flex flex-column">
    <div class="rectangle-chargement-row flex-grow-1">
        Logo
    </div>
    <div class="rectangle-chargement-row flex-grow-1">
        Loader
    </div>
    <div class="rectangle-chargement-row flex-grow-1">
        Some text
    </div>
</div>

демо: https://jsfiddle.net/davidliang2008/sngkbLcq/32/

Если вы хотите «централизовать» контент в каждомВы также можете пометить каждую строку как flexbox и установить ее justify-content и align-items в центр.

<div class="rectangle-chargement d-flex flex-column">
    <div class="rectangle-chargement-row flex-grow-1 
        d-flex justify-content-center align-items-center">
        Logo
    </div>
    <div class="rectangle-chargement-row flex-grow-1 
        d-flex justify-content-center align-items-center">
        Loader
    </div>
    <div class="rectangle-chargement-row flex-grow-1 
        d-flex justify-content-center align-items-center">
        Some text
    </div>
</div>

демо: https://jsfiddle.net/davidliang2008/sngkbLcq/36/