带有引导程序和图像的 Foreach 列出 6 列项目答案

【问题标题】：Foreach with bootstrap and images to list 6 column items带有引导程序和图像的 Foreach 列出 6 列项目
【发布时间】：2019-09-09 16:43:19
【问题描述】：

我使用 foreach 列出带有图像的客户，它应该是 6 列的列表。例如我有 18 个客户，它应该是 6 列 3 行的列表。

那里有剃须刀代码和html：

<div class="row">
@foreach (var patient in Model)
{
    <div class="col-xs-2">

        <figure style="text-align: center; margin-top: 10%; display: block;">

            <img src="~/Content/images/pdficon.png" alt="">

            <figcaption>
                <div style="margin-top: 5%"><h4>@(patient.Name)</h4></div>
            </figcaption>
        </figure>
    </div>
}

目前的结果是：

My sample

有 6 列还可以，但行位置已损坏。

【问题讨论】：

标签： c# html css razor bootstrap-4

【解决方案1】：

最快的方法是在 6 名患者后休息。

@{int patientCnt = 0};
@foreach (var patient in Model)
{
    <div class="col-xs-2">

        <figure style="text-align: center; margin-top: 10%; display: block;">

            <img src="~/Content/images/pdficon.png" alt="">

            <figcaption>
                <div style="margin-top: 5%"><h4>@(patient.Name)</h4></div>
            </figcaption>
        </figure>
    </div>
@{if(patientCnt%6==0)
       @Html.Raw("<br/>");
patientCnt++;
}

}

【讨论】：