使用Bootstrap时如何对齐含长书名的图书卡片？

在自用网站使用Bootstrap框架时，部分图书书名过长会导致卡片无法对齐，即便使用Card组件问题仍存在。

页面效果截图：

原代码如下：

@model BookListModel

<div class="col-md-12">
    <div class="row">
        @foreach (var books in Model.results)
        {
         
        <div class="col-md-3">
                <img src="@books.formats.imagejpeg" alt="...">
                <div class="card-body">
                    <h5 class="card-title">@books.title</h5>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                    </div>
                </div>
                <br />
            </div>
            }
        </div>
</div>

解决方法 #

通过调整Bootstrap布局类，强制卡片高度一致并固定按钮位置：

1. 给卡片容器添加h-100类，让所有卡片高度铺满父列空间
2. 利用卡片内置的card-footer容器固定按钮区域位置
3. 统一图片显示样式，避免图片尺寸差异干扰对齐

修改后的代码：

@model BookListModel

<div class="col-md-12">
    <div class="row">
        @foreach (var books in Model.results)
        {
        <div class="col-md-3 mb-4">
            <div class="card h-100">
                <img src="@books.formats.imagejpeg" alt="@books.title" class="card-img-top img-fluid object-fit-cover">
                <div class="card-body">
                    <h5 class="card-title">@books.title</h5>
                </div>
                <div class="card-footer d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                    </div>
                </div>
            </div>
        </div>
        }
    </div>
</div>

关键修改说明 #

• col-md-3 mb-4：增加底部间距，避免卡片间拥挤
• card h-100：强制所有卡片高度一致，铺满所在列的高度
• card-img-top img-fluid object-fit-cover：确保图片响应式且按比例填充，避免拉伸变形
• card-footer：将按钮区域固定在卡片底部，配合h-100实现全局对齐

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