时间戳

首页 > 解决方案 > 我正在尝试在 asp dot net 项目中进行卡片的水平排列

asp.net - 我正在尝试在 asp dot net 项目中进行卡片的水平排列

问题描述

我正在做一个项目，遇到了一些头脑风暴的问题。我正在尝试在 .cshtml 文件中的 aspdotnet 核心应用程序中做卡。但默认情况下，卡片以垂直方式排列。我希望它们成水平的方式。我该怎么办。？

以下是 index.cshtml 文件的代码：

@foreach (var item in Model)
{
<div class="card border-warning card-columns" style="width: 18rem;">
    <div class="card-body">
        <strong>@Html.DisplayNameFor(model => model.EquipmentName) : </strong>
        <p> @Html.DisplayFor(modelItem => item.EquipmentName)</p>

        <strong>@Html.DisplayNameFor(model => model.EquipmentSetValueTemp) : </strong>
        <p> @Html.DisplayFor(modelItem => item.EquipmentSetValueTemp)</p>

        <strong>@Html.DisplayNameFor(model => model.EquipmentProcessValueTemp) : </strong>
        <p> @Html.DisplayFor(modelItem => item.EquipmentProcessValueTemp)</p>
        <a asp-action="Details" asp-route-id="@item.EquipmentId" class="btn btn-primary">Details</a>
        <a asp-action="Delete" asp-route-id="@item.EquipmentId" class="btn btn-primary">Delete</a>
    </div>
</div>
}

1

标签： asp.netrazor.net-core

解决方案

在内联 CSS 中使用以下样式

style="width: 18rem;display:inline-block; margin:10px"

推荐阅读