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

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

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

в строке 1 логотип svg
во 2 ряду грузчик
в строке 3 какой-то текст

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

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

Вот мой код:

#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>

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

Пожалуйста, предоставьте упрощенную урезанную версию того, что вы пытаетесь сделать.

— 28.05.2019 16:53

Не могу, там "много" кода из-за svg, ничего страшного

— 28.05.2019 16:55

Пожалуйста, отделите свой вопрос от контекста. Чтобы мы могли помочь вам, нам нужен только соответствующий код. Я не думаю, что svg требуется для этого примера.

— 28.05.2019 16:58

svg - моя самая большая проблема..

— 28.05.2019 17:01

Но мой главный вопрос: у меня есть абсолютный div, и в этом div 3 строки. Как мне сделать 3 строки одинаковой высоты, заполняющие div (таким образом, 33% высоты каждой строки)?

— 28.05.2019 17:03

Быстрый и грязный код: codepen.io/svenvandescheur/pen/KLBxKz?editors=1100. Просто укажите проценты и убедитесь, что база доступна (что должно быть в случае, если родитель позиционирован). Есть несколько способов сделать это в зависимости от контекста, но давайте начнем с 33%.

— 28.05.2019 17:09

css bootstrap-4

28.05.2019 16:42

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

263

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Конечно, вы можете жестко закодировать высоту, но поскольку вы спрашиваете, есть ли какой-нибудь более чистый способ сделать это, я считаю, что использовать флексбокс с направлением потока столбца и позволить дочерним элементам флексбокс расти, установив их 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/

Если вы хотите «централизовать» содержимое в каждой строке, вы также можете пометить каждую строку как флексбокс и установить ее 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>