Auf meiner Webseite werden die Projektprodukte derzeit Zeile für Zeile vertikal aufgelistet.
Ich möchte sie vertikal scrollbar anzeigen.
Wie ändere ich es auf Level?
div class="row"> <div class="col-12"> <div class="tab-content tab-animate-zoom"> <!-- Start Single Tab Item --> <div class="tab-pane show active" id="fruits"> <div class="default-slider default-slider--hover-bg-red product-default-slider"> <div class="product-default-slider-4grid-2rows gap__col--30 gap__row--40"> @foreach (var item in Model.CakesVM) { <!-- Start Single Default Product --> <div class="product__box product__default--single text-center"> <!-- Start Product Image --> <div class="product__img-box pos-relative"> <a href="#" class="product__img--link"> <img class="product__img img-fluid" src="~/@Html.DisplayFor(modelItem => item.ProductPicture)" alt=""> </a> <!-- Start Product Action Link--> <ul class="product__action--link pos-absolute"> <li> <a href="@Url.Action(" addToCart", new { id=item.ID })" data-toggle="modal"> <i class="icon-shopping-cart"></i> </a> </li> <li> <a href="#"> <i class="icon-heart"></i> </a> </li> </ul> <!-- End Product Action Link --> </div> <!-- End Product Image --> <!-- Start Product Content --> <div class="product__content m-t-20"> <a href="product-single-default.html" class="product__link">@Html.DisplayFor(modelItem => item.ProductName)</a> <div class="product__price m-t-5"> <span class="product__price">$@Html.DisplayFor(modelItem => item.ProductPrice)</span> </div> </div> <!-- End Product Content --> </div> <!-- End Single Default Product --> } </div> </div> </div> <!-- End Single Tab Item --> </div> </div> </div>
Dies ist die aktuelle Beispielansicht mit vertikal geladenen Elementen.
我添加了静态图像供您参考。