此问题已在此处有答案:
Bootstrap 4 Cards of same height in columns(7个回答)
How to make Bootstrap cards the same height in card-columns?(23个回答)
Bootstrap cards with the same height and responsive(2个答案)
16小时前关门了。
我正在设计一个使用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")
有什么想法吗?我试着添加显示器灵活,但无济于事。
1条答案
按热度按时间6jjcrrmo1#
你试过最大高度的房产吗,它可以限制某个东西变得有多大(如果变得更大,就会溢出)。
此页面解释得很好https://www.w3schools.com/cssref/pr_dim_max-height.php