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

【问题标题】：Use foreach with bootstrap's grid to list items将 foreach 与引导程序的网格一起使用以列出项目
【发布时间】：2015-10-26 06:29:51
【问题描述】：

我使用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。

【问题讨论】：

6 项呈现的 html 是什么样的？

标签： jquery css twitter-bootstrap asp.net-mvc-5

【解决方案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++;
    }
}

【讨论】：

【解决方案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>

【讨论】：