按四项一行显示值

本文关键字：一行 显示 四项 | 更新日期: 2023-09-27 18:01:15

如果可能的话，希望得到一点帮助。

我试图通过循环一个集合来以每行四项的方式显示内容，但它并没有按原样正确显示

对我来说，这感觉是对的。

@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>

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

问候

按四项一行显示值

代码应该很简单，你只需要显示所有的postdiv。bootstrap的列系统会设置它们的宽度，以显示四个项目一行

<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>

由于您的IF条件，此div <div class="row">从未真正关闭。

例如，我有0作为I的值，这是您的<div class="row">的初始创建，到目前为止是正确的。

但是，当i的值为4时，它所做的是在没有真正关闭第一个<div class="row">的情况下创建另一个<div class="row">，因为您的关闭标记处于else if条件中，并且您的代码不会进入最后一个else if条件。

为了解释，您的代码永远不会达到最后一个else-if条件else if (i % 4 == 0 && i != 0)，因为它总是会落入第一个if (i % 4 == 0)，因为它立即满足了条件，并且如果它已经满足了主if条件，它将不必检查任何else if语句。

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

相关文章：