jquery - 将 foreach 与 Bootstrap 的网格一起使用以列出元素

Question

我使用 foreach 列出产品列表以使用此代码模拟商店的目录

@foreach (var item in Model){
       <div class="col-md-4">    
            <div class="wp-block product">
                 <figure>
                        @*<img alt="" src="~/Images/20852816-6959-f6580ba5 (1).jpg" class="img-responsive img-center">*@
                                            <img src="data:image/png;base64,@Convert.ToBase64String(item.Imagen, 0, item.Imagen.Length)" class="img-responsive img-center" />
                  </figure>
                  <h2 class="product-title"><a href="">@Html.DisplayFor(modelItem => item.Description)</a></h2>
                   <p>
                      Descripcion del producto
                  </p>
                  <div class="wp-block-footer">
                       <span class="price pull-left">@Html.DisplayFor(modelItem => item.Precio)</span>
                 <a href="#" class="btn btn-sm btn-base btn-icon btn-cart pull-right">
                       <span>Add to cart</span>
                  </a>
          </div>
     </div>    
</div>
}

但是我只有 3 列和 3 个元素，不管我有多少元素，如果我有 6 个元素，我需要 2 行中的 3 列，但我不确定我必须修改什么元素CSS 或 jQuery。

Answer 1

请为您的输出尝试这个。这将为每 3 个元素构建一个新行。

@{
    var itemCount = 0;
}

@{
    foreach (var item in Model.Reverse().Take(9))
    {
        var insertRow = itemCount % 3 == 0;

        if(insertRow)
        {
            @Html.Raw("<div class="row">
    ")
    }

                           <div class="col-md-4">
                               <div class="wp-block product">
                                   <figure>
                                       @*<img alt="" src="~/Images/20852816-6959-f6580ba5 (1).jpg" class="img-responsive img-center">*@
                                       <img src="data:image/png;base64,@Convert.ToBase64String(item.Imagen, 0, item.Imagen.Length)" class="img-responsive img-center" />
                                   </figure>
                                   <h2 class="product-title"><a href="">@Html.DisplayFor(modelItem => item.Description)</a></h2>
                                   <p>
                                       Descripcion del producto
                                   </p>
                                   <div class="wp-block-footer">
                                       <span class="price pull-left">@Html.DisplayFor(modelItem => item.Precio)</span>
                                       <a href="#" class="btn btn-sm btn-base btn-icon btn-cart pull-right">
                                           <span>Add to cart</span>
                                       </a>
                                   </div>
                               </div>
                           </div>

                               if (insertRow)
                               {
                               @Html.Raw("
                           </div>")
        }

        itemCount++;
    }
}