我们如何在 foreach 循环中将行分成 3 列答案

【问题标题】：How we can divide row in 3 columns in foreach loop我们如何在 foreach 循环中将行分成 3 列
【发布时间】：2019-04-14 07:52:26
【问题描述】：

我想在 foreach 循环中使用 asp.net mvc core 将一行分成 3 列

这是我的代码

@foreach (var item in Model)
{
    <div class="container">
        <h3 class="h3">Products</h3>
        <div class="row">
            <div class="col-md-4 col-lg-3">
                <div class="product-grid2">
                    <div class="product-image2">
                        <a href="#">
                            <img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-2.jpeg">
                            <img class="pic-2" src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-2.jpeg">
                        </a>
                        <ul class="social">
                            <li><a href="#" data-tip="Quick View"><i class="fa fa-eye"></i></a></li>
                            <li><a href="#" data-tip="Add to Wishlist"><i class="fa fa-shopping-bag"></i></a></li>
                            <li><a href="#" data-tip="Add to Cart"><i class="fa fa-shopping-cart"></i></a></li>
                        </ul>
                        <a class="add-to-cart" href="">Add to cart</a>
                    </div>
                    <div class="product-content">
                        <h3 class="title"><a href="#">Women's Designer Top</a></h3>
                        <span class="price">$599.99</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

这是输出

我想将第二个产品移到第一行的第二列

阿努的想法？

【问题讨论】：

嗨@A_Malik 谢谢你的问题，欢迎来到SO，你能添加你的代码输出以及为什么它没有按预期工作
您好，感谢您的关注，我已经更新了我得到的输出。

标签： c# asp.net asp.net-mvc asp.net-mvc-4 .net-core

【解决方案1】：

您的 foreach 循环似乎在错误的行上。您正在创建多个容器，因为容器本身位于 foreach 循环中，而我猜您只想要其中包含产品的 div。

    <div class="container">
        <h3 class="h3">Products</h3>
        <div class="row">
            @foreach (var item in Model)
            {
            <div class="col-md-4 col-lg-3">
                <div class="product-grid2">
                    <div class="product-image2">
                        <a href="#">
                            <img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-2.jpeg">
                            <img class="pic-2" src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-2.jpeg">
                        </a>
                        <ul class="social">
                            <li><a href="#" data-tip="Quick View"><i class="fa fa-eye"></i></a></li>
                            <li><a href="#" data-tip="Add to Wishlist"><i class="fa fa-shopping-bag"></i></a></li>
                            <li><a href="#" data-tip="Add to Cart"><i class="fa fa-shopping-cart"></i></a></li>
                        </ul>
                        <a class="add-to-cart" href="">Add to cart</a>
                    </div>
                    <div class="product-content">
                        <h3 class="title"><a href="#">Women's Designer Top</a></h3>
                        <span class="price">$599.99</span>
                    </div>
                </div>
            </div>
            }
        </div>
    </div>

我不知道您的浏览器要求，以下不是 Razor 模板解决方案。

但是，您可能需要查看 CSS 网格和/或 flexbox：

在创建响应式网站时，它将为您提供更多选择。

【讨论】：