文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在foreach循环中将行划分为3列

问如何在foreach循环中将行划分为3列
EN

Stack Overflow用户

提问于 2019-04-14 07:52:26

回答 1查看 1.2K关注 0票数 0

我想使用asp.net mvc核心将一个行划分为一个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>
}

这是输出

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

有什么想法吗？

asp.net

asp.net-mvc

asp.net-mvc-4

.net-core

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-14 09:00:19

似乎你的前程循环走错了路。您创建了多个容器，因为容器本身在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：

它将为您提供更多的选择，当创建一个响应网站。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55673123

复制

相似问题

问如何在foreach循环中将行划分为3列
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在foreach循环中将行划分为3列EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在foreach循环中将行划分为3列
EN