cari

Rumah  >  Soal Jawab  >  teks badan

Tajuk semula: Paparan Produk Menegak

Pada halaman web saya, pada masa ini, produk projek disenaraikan secara menegak, baris demi baris.

Saya mahu memaparkannya secara menegak dengan cara yang boleh ditatal.

Bagaimana untuk menukarnya kepada tahap? 

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>

Ini ialah paparan contoh semasa, dengan item dimuatkan secara menegak.

P粉926174288P粉926174288273 hari yang lalu3663

membalas semua(1)saya akan balas

  • P粉384244473

    P粉3842444732024-04-06 00:06:55

    Saya menambah imej pegun untuk rujukan anda. 

    .product-default-slider {
  overflow-x: scroll;
  white-space: nowrap;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: gray lightgray;
}

.product-default-slider::-webkit-scrollbar {
  height: 8px;
}

.product-default-slider::-webkit-scrollbar-thumb {
  background-color: gray;
  border-radius: 4px;
}

.product-horizontal-slider {
  display: flex;
  flex-wrap: nowrap;
}

.product__box {
  flex: 0 0 auto;
  margin-right: 10px;
}

    balas
    0
  • Batalbalas