對齊引導卡內容

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 方法需要使用 CSS 將card-body設置為display: flex 。 然后確保flex-direction設置為 column 並將justify-content為 space-between。

注意：Bootstrap 4 卡片組件實際上設置為顯示為 flex。 因此card-body是一個彈性項目。 您可能會遇到問題。 玩玩吧

有關flexbox 的更多信息，請單擊此處。

Answer 2

您應該在卡片 d 中添加“文本中心”