使用 Foreach 循环生成引导网格答案

【问题标题】：Generating bootstrap grid with Foreach loop使用 Foreach 循环生成引导网格
【发布时间】：2016-04-15 18:15:34
【问题描述】：

我真的很接近完成这项工作。我试图在每行中获取 3 张图像。但是，第一行只有 1 个图像，其余的有 3 个图像。我不确定为什么第一行只有一张图片。这是我的代码：

        <div class="row">
        @{ var counter = 0; }

        @foreach (var x in portifolioImages)
        {
            <div class="col-sm-4">
                <a href="#"><img src="@x.UmbracoFile" alt="@x.imageTitle" style="margin:0 auto;" />
                    <p class="folioTitle">@x.imageClient <br /><span style="color:#00bfff; font-weight: bold; text-transform: uppercase; font-size:15px;">Learn More</span></p>
                </a>  
            </div>
            if (counter % 3 == 0)
            {
                @:</div><div class="row">
            counter = 0;
            }
            counter++;
        }
    </div>

【问题讨论】：

删除这部分 if (counter % 3 == 0) { @:

counter = 0; } 计数器++;然后检查
关闭，但第一行有 2 张图片，其余有 3 张
如果你想要一行 3 张图片，为什么计数器，boostrap 网格会为你做，col-*-4 表示 33.3% width 表示每行平均分为 3 行，所以简单的 <div class="row"> foreach { <div class="col-sm-4"> images </div> } endforeach</div> 应该可以完成这项工作
所以尽管它们都在一个大行类中，我仍然会得到一个网格？谢谢，我会记住这一点

标签： c# twitter-bootstrap razor foreach

【解决方案1】：

您的计数器从 0 开始。当计数器为 0 时，if (counter % 3 == 0) 语句将为真，因此您的第一行将只有 1 个元素。从 1 而不是 0 开始计数器，它应该可以工作。

另外，它在第一行之后工作正常的原因是因为您将计数器重置为 0，但随后立即将其递增为 1。因此，您的第一行从 0 处的计数器开始，但以下所有行都以计数器开头1.

【讨论】：

应该注意，将counter重置为0是没有必要的。
试过了，第一行有 2 张图片，然后第二行只有 1 张图片。其余的有 3 张图片。
@ChristopherNorthcutt 你唯一改变的行是@{ var counter = 0; } 到@{ var counter = 1; }？
是的，但后来我意识到是 CSS 中的某些东西导致它再次搞砸了。我得到了它！非常感谢

【解决方案2】：

应该只是将 counter++ 移到 if 语句之前。

【讨论】：