对齐引导卡内容

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 的更多信息，请单击此处。