水平显示？
水平显示？
提问于 2022-12-03 17:45:16
@foreach (var item in APModel)
{
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card" style="width: 18rem;">
<img src="https://images.pexels.com/photos/2360673/pexels-photo-2360673.jpeg?auto=compress&cs=tinysrgb&w=600" class="card-img-top" alt="...">
<div class="card-body">
<h6 class="card-title">PropertyType: @item.PropertyType</h6>
<h6 class="card-title">PropertyStatus: @item.PropertyStatus</h6>
<h6 class="card-title">Price: @item.Price</h6>
<h6 class="card-title">Location: @item.Location</h6>
<h6 class="card-title">Rooms @item.TotalRooms</h6>
<h6 class="card-title">Baths @item.Bathrooms</h6>
<p class="card-text">@item.Description</p>
<button class="btn btn-outline-danger btn-sm"
@onclick="(()=>DeleteProperty(item.PropertyID))">
Del
</button>
</div>
</div>
</div>
</div>
}我想要水平地显示这些卡片，但它们总是垂直显示，我该怎么做呢？
回答 1
Stack Overflow用户
发布于 2022-12-03 18:29:54
CSS中的显示灵活性将解决这个问题。当然，我看不见你的名片，所以你必须在这之后处理实际的造型。您也可以为此使用网格样式。
.card-body {
display: flex;
justify-content: space-between;
}<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card" style="width: 18rem;">
<img src="https://images.pexels.com/photos/2360673/pexels-photo-2360673.jpeg?auto=compress&cs=tinysrgb&w=600" class="card-img-top" alt="...">
<div class="card-body">
<h6 class="card-title">PropertyType: @item.PropertyType</h6>
<h6 class="card-title">PropertyStatus: @item.PropertyStatus</h6>
<h6 class="card-title">Price: @item.Price</h6>
<h6 class="card-title">Location: @item.Location</h6>
<h6 class="card-title">Rooms @item.TotalRooms</h6>
<h6 class="card-title">Baths @item.Bathrooms</h6>
<p class="card-text">@item.Description</p>
</div>
<button class="btn btn-outline-danger btn-sm"
@onclick="(()=>DeleteProperty(item.PropertyID))">
Del
</button>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74669156
复制相关文章
相似问题
腾讯云开发者
