Foreachループを使用したブートストラップグリッドの生成

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であるので、あなたの最初の行は1つだけの要素を持っているとしているときif (counter % 3 == 0)文が真となる0から始まります。 0の代わりに1でカウンタを起動するとうまくいくはずです。

また、最初の行の後で正常に動作する理由は、カウンタを0にリセットしてからすぐに1に増やすためです。したがって、最初の行は0のカウンタで始まりますが、 1.