Как мы можем разделить строку на 3 столбца в цикле foreach - PullRequest
Новая
       48

Как мы можем разделить строку на 3 столбца в цикле foreach

0 голосов
/ 14 апреля 2019

Я хочу разделить строку на 3 столбца в цикле foreach, используя asp.net mvc core

Это мой код 

@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

Я хотел бы переместить второй продукт во второй столбец первого ряда

Идеи Ану?

1 Ответ

0 голосов
/ 14 апреля 2019

Кажется, что ваш цикл 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:

Это даст вам гораздо больше возможностей при создании адаптивного веб-сайта.

...