对齐引导卡内容

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设置为列，将justify-content设置为空格。

注意：Bootstrap 4卡组件实际上已设置为显示为flex。因此card-body是一个弹性项目。您可能会遇到问题。玩一玩。

有关flexbox click here的更多信息。