我们如何在foreach循环中划分3列中的行

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我们如何在foreach循环中划分3列中的行相关的知识,希望对你有一定的参考价值。

我想使用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">$599.99</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

这是输出

enter image description here

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

这些想法?

答案

看起来你的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:

在创建响应式网站时,它会为您提供更多选项。

以上是关于我们如何在foreach循环中划分3列中的行的主要内容,如果未能解决你的问题,请参考以下文章

如何转换由 | 分隔的顺序数据并且在 pyspark 中的行和列中没有换行符

如何将单独列中冒号前后的单词拆分为sql中的行

MySQL foreach 循环

php foreach怎样获取当前的循环次数

在 foreach 循环 Blazor 中触发网络请求

如何在 SwiftUI 的 foreach 循环中设置切换状态