对齐引导卡内容 [英] Align bootstrap-cards contents

问题描述

从图像中可以看到，文本的最后一行与其他引导卡的其他行未对齐.从逻辑上讲，这一事实主要取决于上部文本的大小.

As you can see from the image, the last line of text is not aligned with the others (of the other bootstrap-cards). Logically this fact depends mainly on the size of the upper text.

如何确保不管文本的长度如何，三个基本部分始终对齐?还应考虑标题(文本的第一行)可能在多行中(非常极端的情况).

How can I ensure that regardless of the length of the text the three fundamental parts are always aligned? Considering also that the title (the first line of text) could be on multiple lines (very extreme case).

这是仅一张卡的代码:

<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>

推荐答案

您要么必须对卡上的CSS Flexbox进行调整，才能使您的元素排成一行.或者，您可以使用Bootstrap的card-footer类，该类会将所有内容放在底部.然后，您可以修改卡页脚上的css属性，以使其随心所欲.

You would either have to tweak the CSS Flexbox on the card to get your elements to line up. Or you could use Bootstrap's card-footer class which will place any content at the bottom. Then you could modify the css properties on the card footer to make it look however you want.

<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>

在我看来，这将是最简单的方法.

This would be the easiest way in my opinion.

flexbox方法需要使用CSS将card-body设置为display: flex.然后确保将flex-direction设置为列，将justify-content设置为空格.

The flexbox method would required setting the card-body as display: flex using CSS. Then making sure the flex-direction is set to column and justify-content to space-between.

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

Note: The Bootstrap 4 card component is actually set to display as flex. Therefore the card-body is a flex item. You may run into problems. Have a play around.

有关 flexbox的更多信息，请单击此处.

这篇关于对齐引导卡内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！