Question

这可能听起来很简单，但我有N'主机'，我正在试图找出逻辑，以便我可以在每个面板中创建3个主机的面板行。主人只是一张照片。下面是我的代码，但我不知道如何设置它。防爆。 3个图片将是一行，其中1个面板和3个列，每个包含1个图片。或者5个图片/主机将有2行/面板，第一行有3个图片，第二行有2个图片。等等。

这是我的代码

foreach (var host in Model.Hosts) {
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="col-sm-4">thumbnail pic/host</div>
        <div class="col-sm-4">thumbnail pic/host</div>
        <div class="col-sm-4">thumbnail pic/host</div>
      </div>
</div>
}

Answer 1

你需要使用剃刀@:来打破c＃循环代码并渲染一个'新行'

<div class="panel panel-default">
    <div class="panel-body">
        @for (int i = 0; i < Model.Hosts.Count; i++)
        {
            if (i > 0 && i % 3 == 0)
            {
                // close the row div's and start new ones
                @:</div></div><div class="panel panel-default"><div class="panel-body">
            }
            <div class="col-sm-4">@Model.Hosts[i].SomeProperty</div>
        }
    </div>
</div>

注意，如果Hosts不是IList<T>，则使用声明变量 - @{ int i = 0; } - 并将其递增并且每次迭代结束 - i++; - 用于if阻止

用于为每行构建3列缩略图的逻辑

1 个答案: