Выровнять содержимое загрузочных карт

Question

Как видно из рисунка, последняя строка текста не выровнена с остальными (из других загрузочных карт).Логически этот факт зависит главным образом от размера верхнего текста.

Как я могу гарантировать, что независимо от длины текста три основные части всегда выровнены?Учитывая также, что заголовок (первая строка текста) может быть в несколько строк (очень крайний случай).

Это код только для одной карты:

<div class='col-lg-4' style='cursor: pointer; padding-bottom: 15px;'>
    <div style='height: 377.59px;' class='card mb-3' style='border: 1px solid #33cdc6;'>
        <img style='height:185.59px; width: 100%;' class='card-img-top' src='#' alt='Card image cap'>
        <div class='card-body'>
            <h5 class='card-title' style='color: #293a44;'>TITOLO</h5>
            <p class='card-text'>Breve descrizione</p>
            <p class='card-text'>
                <span class='h5 text-muted'>Montepremi</span>";
                <small style='padding-left: 125px;' class='text-muted'>data</small>
            </p>
        </div>
    </div>
</div>

Answer 1

Вы должны были бы настроить CSS Flexbox на карте, чтобы выровнять элементы.Или вы можете использовать класс Bootstrap card-footer, который поместит любой контент внизу.Затем вы можете изменить свойства css в нижнем колонтитуле карты, чтобы она выглядела так, как вы хотите.

<div class='col-lg-4' style='cursor: pointer; padding-bottom: 15px;'>
<div style='height: 377.59px;' class='card mb-3' style='border: 1px solid #33cdc6;'>
    <img style='height:185.59px; width: 100%;' class='card-img-top' src='#' alt='Card image cap'>
    <div class='card-body'>
        <h5 class='card-title' style='color: #293a44;'>TITOLO</h5>
        <p class='card-text'>Breve descrizione</p>
        <p class='card-text'>
            <span class='h5 text-muted'>Montepremi</span>";
            <small style='padding-left: 125px;' class='text-muted'>data</small>
        </p>
    </div>
    <div class="card-footer>
        Footer Text here
    </div>
</div>

Это будет самый простой способ, на мой взгляд.

Метод flexbox потребовал бы установить card-body как display: flex с помощью CSS.Затем убедитесь, что flex-direction установлен в столбец, а justify-content в интервал.

Примечание. Компонент карты Bootstrap 4 фактически настроен для отображения как гибкий.Следовательно, card-body - это гибкий элемент.Вы можете столкнуться с проблемами.Поиграйте.

Для получения дополнительной информации о flexbox нажмите здесь .