如何统一HTML页面卡片尺寸？网站卡片尺寸不一致问题求助

问题描述 #

我的网站中，除左下角的卡片外，其余所有卡片尺寸均一致。我已经为卡片使用了相同尺寸的图片，请问该如何修复这个问题？

现有HTML代码 #

<div class="row mx_auto">
        {% for product in products.object_list %}
        <div class="my_bottom_margin col-9 col-sm-12 col-md-4  xol-lg-4">
            <div class="card text-center" style="min-width:18rem;">
                <a href="{{product.get_url}}"><img class="card-img-top my_image" src="{{product.image.url}}" alt="{{product.name}}"></a>
                <div class="card-body">
                    <h4>{{product.name}}</h4>
                    <p>{{product.price}}</p>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

现有CSS代码 #

.my_image {
    width :100%;
    height:auto;
}
.my_bottom_margin{
    margin-bottom :10px;
}
.card-body h4
{
font-size:14px;
text-transform:uppercase;
letter-spacing:.2em;
}

修复步骤 #

• 修正网格类拼写错误：HTML中的xol-lg-4是笔误，应改为col-lg-4。这个错误会导致最后一个卡片无法正确应用Bootstrap的lg屏幕尺寸网格规则，宽度失控。
• 修复行对齐类：.row中的mx_auto需改为mx-auto（连字符不可少），确保行容器水平居中，避免布局偏移。
• 统一卡片高度：给卡片添加高度占满父容器的样式，避免因内容差异导致高度不一致：

.card {
    height: 100%;
    min-width: 18rem;
}

• 优化内容区域布局：给卡片内容区添加弹性布局，让内容自动填充空间，保持底部对齐：

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

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