如何确保Bootstrap卡片保持相同的高度与宽度

我用Bootstrap实现了一行3个卡片的布局，但第一个卡片因为标题文本过长导致高度比其他卡片高，想知道怎么确保所有卡片高度一致，比如把过长文本截断显示省略号？

实现代码 #

<div class="container mt-4">
    <div class="row">
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <div class="reward12"><h1 class="rewardtext12">#50</h1></div>
                    <h5 class="card-title">Hiya how is your day been this is extra long text ?</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                   <center><button type="button" class="btn btn-info" disabled="disabled">Status - Claimed</button></center>
                    Tag: <span class="tag tag-teal">CSS/HTML</span>
                    <div class="user">
                        <img src="https://yt3.ggpht.com/a/AGF-l7-0J1G0Ue0mcZMw-99kMeVuBmRxiPjyvIYONg=s900-c-k-c0xffffffff-no-rj-mo" alt="user" />
                        <div class="user-info">
                          <h5>Joey Jenkins</h5>
                          <small><strong>30s ago</strong></small>
                        </div>
                      </div>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <div class="reward12"><h1 class="rewardtext12">#50</h1></div>
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <center><button type="button" class="btn btn-danger" disabled="disabled">Status - Completed</button></center>
                    Tag: <span class="tag tag-teal">CSS/HTML</span>
                    <div class="user">
                        <img src="https://yt3.ggpht.com/a/AGF-l7-0J1G0Ue0mcZMw-99kMeVuBmRxiPjyvIYONg=s900-c-k-c0xffffffff-no-rj-mo" alt="user" />
                        <div class="user-info">
                          <h5>Joey Jenkins</h5>
                          <small><strong>30s ago</strong></small>
                        </div>
                      </div>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <div class="reward12"><h1 class="rewardtext12">#50</h1></div>
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <center><button type="button" class="btn btn-success">Claim</button></center>
                    Tag: <span class="tag tag-teal">CSS/HTML</span>
                    <div class="user">
                        <img src="https://yt3.ggpht.com/a/AGF-l7-0J1G0Ue0mcZMw-99kMeVuBmRxiPjyvIYONg=s900-c-k-c0xffffffff-no-rj-mo" alt="user" />
                        <div class="user-info">
                          <h5>Joey Jenkins</h5>
                          <small><strong>30s ago</strong></small>
                        </div>
                      </div>
                </div>
            </div>
        </div>
    </div>
    <h3>Hi</h3>
    <br>
</div>

<style>
    .user {
        display: flex;
        margin-top: auto;
    }

    .user img {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }
    .user-info h5 {
        margin: 0;
    }
    .user-info small {
        color: #545d7a;
    }

    .reward12 {
        background: green;
        font-weight: bold;
        text-align: center;
        height: 30px;
        border-radius: 30px;
        font-size: 12px;
        margin: 0;
        color: #fff;
        padding: 2px 10px;
        text-transform: uppercase;
        cursor: context-menu;
    }
    .rewardtext12 {
        font-size: 20px;
        font-family: 'PT Sans', serif;
        font-weight: bold;
    }
    .tag {
        background: #cccccc;
        border-radius: 50px;
        font-size: 12px;
        margin: 0;
        color: #fff;
        padding: 2px 10px;
        text-transform: uppercase;
        cursor: pointer;
    }
    .tag-teal {
        background-color: #47bcd4;
    }
    .tag-purple {
        background-color: #5e76bf;
    }
    .tag-pink {
        background-color: #cd5b9f;
    }
</style>

当前效果中，第一个卡片因标题文本过长，整体高度明显高于另外两个卡片，视觉布局不协调。

方法1：截断过长文本显示省略号 #

给.card-title添加CSS样式，限制显示行数，超出部分自动截断并显示省略号，避免单个卡片被拉高：

.card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 可根据需求调整显示行数 */
    -webkit-box-orient: vertical;
}

将这段样式添加到现有<style>标签中即可生效，标题超过指定行数后会自动截断，保持卡片高度一致。

方法2：强制所有卡片高度统一 #

如果希望不管内容长度如何，所有卡片高度完全一致，可通过Flex布局实现：

方式A：使用Bootstrap内置类 #

给每个卡片的div.card添加h-100类，同时给.card-body添加d-flex flex-column类，让内容自动填充高度，底部的用户信息模块自动靠下对齐：

<div class="card h-100" style="width: 18rem;">
    <div class="card-body d-flex flex-column">
        <!-- 卡片原有内容 -->
        <div class="user mt-auto">
            <!-- 用户信息内容 -->
        </div>
    </div>
</div>

方式B：自定义CSS #

如果不想依赖Bootstrap类，也可以自定义CSS实现相同效果：

.card {
    height: 100%;
}
.card-body {
    display: flex;
    flex-direction: column;
}
.user {
    margin-top: auto; /* 让用户信息模块固定在卡片底部 */
}

这种方法会让所有卡片高度统一，即使内容长度不同，底部元素也会对齐，视觉上更整齐。

内容的提问来源于stack exchange，提问作者FattyDev1