使用HTML和Bootstrap修复.cshtml页面卡片布局不齐问题

我正在使用HTML和Bootstrap设计一个.cshtml页面，以卡片格式展示数据库中的鸡尾酒对象，但卡片布局不齐，效果如下：

以下是我的代码：

@model IEnumerable<Cocktail>

@{
    ViewData["Title"] = "List of Cocktails";
}

<div class="row">
    @foreach (var item in Model)
    {
        <div class="col-md-4 col-xs-6 border-primary mb-3">
            <div class="card mb-3" style="width: 540px;">
                <div class="row g-0">
                    <div class="col-md-12">
                        <div class="card-header text-white bg-info">
                            <p class="card-text">
                                <h5 class="card-title">
                                    @item.Name
                                    <a class="text-white float-right"><i class="bi bi-pencil-square"></i></a>
                                </h5>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        @*<img src="@item.ImageUrl" width="100%" alt="@item.Name">*@
                        <img src="@item.ImageUrl" width="100%" alt="@item.Name">
                    </div>
                    <div class="col-md-6">
                        <div class="card-body">
                            <p class="card-text">@item.Description</p>
                            <p class="card-text"><b>Category: </b>@item.DrinkCategory</p>

                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="card-footer ">
                            <p class="card-text">
                                <a class="btn btn-outline-primary float-right" asp-action="Details" asp-route-id="@item.Id"><i class="bi bi-eye-fill"></i> Show Details</a>
                                <a class="btn btn-success text-white"><i class="bi bi-cart-plus"></i> Add to Cart (Price @item.Price.ToString("c"))</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

@await Html.PartialAsync("_CreateItem", "Cocktails")

我尝试添加display:flex但未解决问题，请问有什么可行的解决思路？

解决思路 #

1. 移除卡片的固定宽度

卡片设置的style="width: 540px;"会强制卡片超出Bootstrap网格列的自适应宽度，直接打破布局逻辑。删除这个固定宽度样式，让卡片自动适配父容器col-md-4的宽度。

2. 统一卡片高度

由于卡片内描述文本长度不同，导致卡片高度不一致，进而打乱行对齐。用Bootstrap的flex类强制卡片高度统一：

• 给卡片容器添加d-flex flex-column h-100，让卡片撑满父列高度，内部元素按垂直方向排列
• 给卡片主体card-body添加flex-grow-1，让描述区域自动填充剩余空间，确保卡片footer固定在底部

3. 修正响应式列类（Bootstrap 4+适配）

原代码中的col-xs-6在Bootstrap 4及以上版本已被弃用，改为col-6，保证移动端响应式布局正常。

修改后的完整代码 #

@model IEnumerable<Cocktail>

@{
    ViewData["Title"] = "List of Cocktails";
}

<div class="row">
    @foreach (var item in Model)
    {
        <div class="col-md-4 col-6 border-primary mb-3">
            <div class="card mb-3 d-flex flex-column h-100">
                <div class="row g-0">
                    <div class="col-md-12">
                        <div class="card-header text-white bg-info">
                            <p class="card-text">
                                <h5 class="card-title">
                                    @item.Name
                                    <a class="text-white float-right"><i class="bi bi-pencil-square"></i></a>
                                </h5>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <img src="@item.ImageUrl" width="100%" alt="@item.Name">
                    </div>
                    <div class="col-md-6">
                        <div class="card-body flex-grow-1">
                            <p class="card-text">@item.Description</p>
                            <p class="card-text"><b>Category: </b>@item.DrinkCategory</p>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="card-footer ">
                            <p class="card-text">
                                <a class="btn btn-outline-primary float-right" asp-action="Details" asp-route-id="@item.Id"><i class="bi bi-eye-fill"></i> Show Details</a>
                                <a class="btn btn-success text-white"><i class="bi bi-cart-plus"></i> Add to Cart (Price @item.Price.ToString("c"))</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

@await Html.PartialAsync("_CreateItem", "Cocktails")

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