Question

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

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

Answer 1

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

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

Answer 2

应该在if语句之前将counter ++移了。

使用Foreach循环生成引导网格

2 个答案: