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

Question

我想使用 asp.net mvc core

在 foreach 循环中将一行分成 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">9.99</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

这是输出结果

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

阿努的想法？

Answer 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">9.99</span>
                    </div>
                </div>
            </div>
            }
        </div>
    </div>

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

但是，您可能需要查看 CSS 网格 and/or 弹性框：

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

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

How we can divide row in 3 columns in foreach loop

c#

asp.net

asp.net-mvc

asp.net-mvc-4

.net-core