как выровнять карточку bootstrap-4, когда заголовок первой карточки имеет разрыв слова, а заголовок второй карточки не

Question

Я строю небольшой проект для себя прямо сейчас, с начальной загрузкой 4. Однако я наткнулся на проблему. Я использую карточку класса для своей галереи, но у одного заголовка карточки есть набор «пустого пространства», поэтому он разбивает слово, в то время как у другого заголовка карточки нет «белого пространства». Это происходит только на экране ноутбука. На экранах телефонов и т. Д. Все работает, а на рабочем столе работает нормально.

Я пытался использовать CSS3, это медиа-запрос, или установить для их полей на полях значение 0, в надежде выровнять его по нижней части строки, но, к счастью, пока мне ничего не помогло. Я искал в StackOverflow связанную с этим проблему, и все, что я мог найти, это люди, у которых были проблемы с выравниванием элементов ВНУТРИ тела карточки, но я хотел бы, чтобы классы карточек, независимо от того, были ли слова разбиты или нет, были выровнены. Почему-то я не могу использовать ссылку для ссылки на свою фотографию, поэтому вот ссылка: https://imgur.com/sxPTN9n

как выглядят мои html и css:

.whiteSpaceNotAllowed {
    white-space: nowrap;
}


.whiteSpaceAllowed {
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    .whiteSpaceAllowed {
        white-space: normal;
    }
}

<div class="container-fluid">
<div class="row">
    <div class="col-lg-3">
        <div class="card gallerijCard">
            <div class="card-header GallerijCardHeader">
                <center><p>Ontwerp <span class="whiteSpaceAllowed">& interieur</span></p></center>
                <!-- the span class whiteSpaceAllowed = white-space -> wrapped -->
            </div>
            <div class="card-body">
                <!-- not relevent code -->
            </div>
        </div>
    </div> <!--ending col-lg-3 class-->
    <div class="col-lg-3">
        <div class="card gallerijCard">
            <div class="card-header GallerijCardHeader">
                <center><p><span class="whiteSpaceNotAllowed">Renovatie</span></p></center>
                <!-- whiteSpaceNotAllowed class = white-space -> normal -->
            </div>
            <div class="card-body">
                <!-- not relevent code -->
            </div>
        </div>
    </div> <!--ending col-lg-3 class-->
</div> <!-- ending row-->

Итак, чтобы объяснить, что я пытаюсь сделать:

Слово «Ontwerp & interieur» должно появиться на экране ноутбука, но обе карты должны быть расположены рядом друг с другом.

Answer 1

// Решение простое, Никки, все, что вам нужно сделать, это установить минимальную высоту для всех карт в галерее.Вы устанавливаете минимальную высоту в этих разделах своего кода, как показано ниже, вы можете изменить значение в соответствии с вашими потребностями.

<div class="col-lg-3" style='min-height: 300px'>
    <div class="card gallerijCard">
        <div class="card-header GallerijCardHeader">
            <center><p>Ontwerp <span class="whiteSpaceAllowed">& interieur</span></p></center>
            <!-- the span class whiteSpaceAllowed = white-space -> wrapped -->
        </div>
        <div class="card-body">
            <!-- not relevent code -->
        </div>
    </div>
</div>