html - 如何使用 foreach 在 1 行中显示正确的 4 个缩略图

Question

结果我有下一个 View :

view.cshtml

<div class="row">
@foreach (var item in Model)
{
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="@Url.Content(item.Photo ?? "~/Content/noimg.png")" class="img-thumbnail" alt="@item.Name" />
            <div class="caption">
                <h3>@item.Name</h3>
                <p class="text-center">
                    @Html.ActionLink("Изменить", "Edit", new {id = item.GameId}, new { @class = "btn btn-primary btn-xs" })
                    @Html.ActionLink("Детали", "Details", new {id = item.GameId}, new { @class = "btn btn-info btn-xs" })
                    @Html.ActionLink("Удалить", "Delete", new {id = item.GameId}, new { @class = "btn btn-danger btn-xs" })
                </p>
            </div>
        </div>
    </div>
}

我应该如何更改样式才能正确显示 4 张图片(以及游戏名称)

默认类.thumbnail

    .thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #002b36;
    border: 1px solid #dddddd;
    border-radius: 4px;
    -webkit-transition: border 0.2s ease-in-out;
    -o-transition: border 0.2s ease-in-out;
    transition: border 0.2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
    margin-left: auto;
    margin-right: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
    border-color: #2aa198;
}
.thumbnail .caption {
    padding: 9px;
    color: #839496;
}

那么我需要改变什么？ 请帮助我。

没有“标题”的结果

Answer 1

首先创建一个好的'ol 表...其次创建一个变量计数器。 Tersio，检查下面的示例...

var counter = 1;
<table>
<tr>
    @foreach (var item in Model)
    {       
        <td style="border:1px solid black; vertical-align:text-bottom">
        <div class="col-sm-6 col-md-3">
         <div class="thumbnail">
          <img src="@Url.Content(item.Photo ?? "~/Content/noimg.png")" class="img-thumbnail" alt="@item.Name" />
           <div class="caption">
            <h3>@item.Name</h3>
            <p class="text-center">
                @Html.ActionLink("Изменить", "Edit", new {id = item.GameId}, new { @class = "btn btn-primary btn-xs" })
                @Html.ActionLink("Детали", "Details", new {id = item.GameId}, new { @class = "btn btn-info btn-xs" })
                @Html.ActionLink("Удалить", "Delete", new {id = item.GameId}, new { @class = "btn btn-danger btn-xs" })
            </p>
          </div>
         </div>
        </div>
        </td>
        if(counter%4 == 0)
         {
             @:</tr><tr>
         }
        counter++;
    }      
}
</table>

每次它都会在你想要的行中获得值的数量(例如= 4 if(counter％4 == 0))然后它会触发该行的结尾...

我认为这是一种完全按照您的需要做的不同方式...