以四个项

Question

如果可能，希望得到一些帮助。

我试图通过循环遍历集合来显示每行四个项目的内容，但它没有正确显示。

对我来说感觉很好。

@for (var i = 0; i < Model.T.Count(); i++)
 {
if (i % 4 == 0)
{
    @:<div class="row">
        <div class="col-xs-6 col-sm-3 col-md-3">
            <div class="post">
                <div class="post-img-content-4">
                    <img src="images/u14.jpg" class="img-responsive" />
                    <span class="post-title">
                        <b>@Model.T[i].TopicName</b><br />
                    </span>
                </div>
            </div>
        </div>


}
else if (i % 4 == 1)
{
    <div class="col-xs-6 col-sm-3 col-md-3">
        <div class="post">
            <div class="post-img-content-4">
                <img src="images/u14.jpg" class="img-responsive" />
                <span class="post-title">
                    <b>@Model.T[i].TopicName</b><br />
                </span>
            </div>
        </div>
    </div>
}
else if (i % 4 == 2)
{
    <div class="col-xs-6 col-sm-3 col-md-3">
        <div class="post">
            <div class="post-img-content-4">
                <img src="images/u14.jpg" class="img-responsive" />
                <span class="post-title">
                    <b>@Model.T[i].TopicName</b><br />
                </span>
            </div>
        </div>
    </div>
}
else if (i % 4 == 3)
{
    <div class="col-xs-6 col-sm-3 col-md-3">
        <div class="post">
            <div class="post-img-content-4">
                <img src="images/u14.jpg" class="img-responsive" />
                <span class="post-title">
                    <b>@Model.T[i].TopicName</b><br />
                </span>
            </div>
        </div>
    </div>

}
else if (i % 4 == 0 && i != 0)
{
 @:</div><div>
    <div class="col-xs-6 col-sm-3 col-md-3">
        <div class="post">
            <div class="post-img-content-4">
                <img src="images/u14.jpg" class="img-responsive" />
                <span class="post-title">
                    <b>@Model.T[i].TopicName</b><br />
                </span>
            </div>
        </div>
    </div>
   }

  }
</div>

如何以每行四个项目的行显示这些项目？

此致

Answer 1

由于您的IF条件，此div <div class="row">永远不会真正关闭。

示例，我将 i 的值设为0，这是您<div class="row">的初始创建，这是迄今为止正确的。

但是我们得到4作为 i 的值，它的作用是创建另一个<div class="row">而没有真正关闭第一个<div class="row">，因为你的结束标记是在else if条件下，您的代码不会进入最后else if条件。

要解释一下，如果条件为else if (i % 4 == 0 && i != 0)，您的代码将永远不会达到最后一个，因为它始终属于第一个if (i % 4 == 0)，因为它会立即满足条件，并且不会检查任何条件那些ELSE IF语句，如果它已经满足主要的IF条件。

建议将<div class="row">的结束div标记放在else if (i % 4 == 3)代码块

Answer 2

代码应该很简单，你只需要显示所有post div。引导程序的列系统将其宽度设置为每行显示四个项目

<div class="row">
  @for (var i = 0; i < Model.T.Count(); i++) {
     <div class="col-xs-6 col-sm-3 col-md-3">
        <div class="post">
            <div class="post-img-content-4">
                <img src="images/u14.jpg" class="img-responsive" />
                <span class="post-title">
                    <b>@Model.T[i].TopicName</b><br />
                </span>
            </div>
        </div>
     </div>
  }
</div>