将 foreach 与引导程序的网格一起使用以列出项目

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项，我需要3列在2行，但我不确定什么元素我必须用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++;
    }
}

Answer 2

您可以将内容包装成一行，参见以下示例

 <div class="container" style="width: 800px">
   <div class="row">
     <div class="col-xs-4">.col-md-4</div>
     <div class="col-xs-4">.col-md-4</div>
     <div class="col-xs-4">.col-md-4</div>
     <div class="col-xs-4">.col-md-4</div>
     <div class="col-xs-4">.col-md-4</div>
     <div class="col-xs-4">.col-md-4</div>
     <div class="col-xs-4">.col-md-4</div>
     <div class="col-xs-4">.col-md-4</div>
     <div class="col-xs-4">.col-md-4</div>
     <div class="col-xs-4">.col-md-4</div>
     <div class="col-xs-4">.col-md-4</div>
     <div class="col-xs-4">.col-md-4</div>
  </div> 
</div>

https://jsfiddle.net/arc0g6ys/

<div class="container" style="width: your container with better to create a new class">
  <div class="row">
    @foreach (var item in Model){ 
       ...
    }
  </div>
</div>