css 垂直产品视图

在我的网页上，目前，项目产品是列在一行一行垂直。
我想用滚动条垂直显示它们。
如何将此更改为横向？

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>

这是当前示例视图，项目垂直加载。

我添加了静态图像供您参考。

.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;
}

<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-horizontal-slider">

            <!-- Updated class name -->
            <!-- Product 1 -->
            <div class="product__box product__default--single text-center">
              <div class="product__img-box pos-relative">
                <a href="#" class="product__img--link">
                  <img class="product__img img-fluid" src="https://via.placeholder.com/150" alt="Product Image 1">
                </a>
                <ul class="product__action--link pos-absolute">
                  <li>
                    <a href="#" data-toggle="modal">
                      <i class="icon-shopping-cart"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="icon-heart"></i>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="product__content m-t-20">
                <a href="product-single-default.html" class="product__link">Product 1</a>
                <div class="product__price m-t-5">
                  <span class="product__price">$9.99</span>
                </div>
              </div>
            </div>

            <!-- Product 2 -->
            <div class="product__box product__default--single text-center">
              <div class="product__img-box pos-relative">
                <a href="#" class="product__img--link">
                  <img class="product__img img-fluid" src="https://via.placeholder.com/150" alt="Product Image 2">
                </a>
                <ul class="product__action--link pos-absolute">
                  <li>
                    <a href="#" data-toggle="modal">
                      <i class="icon-shopping-cart"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="icon-heart"></i>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="product__content m-t-20">
                <a href="product-single-default.html" class="product__link">Product 2</a>
                <div class="product__price m-t-5">
                  <span class="product__price">$19.99</span>
                </div>
              </div>
            </div>

            <!-- Product 3 -->
            <div class="product__box product__default--single text-center">
              <div class="product__img-box pos-relative">
                <a href="#" class="product__img--link">
                  <img class="product__img img-fluid" src="https://via.placeholder.com/150" alt="Product Image 3">
                </a>
                <ul class="product__action--link pos-absolute">
                  <li>
                    <a href="#" data-toggle="modal">
                      <i class="icon-shopping-cart"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="icon-heart"></i>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="product__content m-t-20">
                <a href="product-single-default.html" class="product__link">Product 3</a>
                <div class="product__price m-t-5">
                  <span class="product__price">$14.99</span>
                </div>
              </div>
            </div>

            <!-- Product 4 -->
            <div class="product__box product__default--single text-center">
              <div class="product__img-box pos-relative">
                <a href="#" class="product__img--link">
                  <img class="product__img img-fluid" src="https://via.placeholder.com/150" alt="Product Image 4">
                </a>
                <ul class="product__action--link pos-absolute">
                  <li>
                    <a href="#" data-toggle="modal">
                      <i class="icon-shopping-cart"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="icon-heart"></i>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="product__content m-t-20">
                <a href="product-single-default.html" class="product__link">Product 4</a>
                <div class="product__price m-t-5">
                  <span class="product__price">$24.99</span>
                </div>
              </div>
            </div>

            <!-- Product 5 -->
            <div class="product__box product__default--single text-center">
              <div class="product__img-box pos-relative">
                <a href="#" class="product__img--link">
                  <img class="product__img img-fluid" src="https://via.placeholder.com/150" alt="Product Image 5">
                </a>
                <ul class="product__action--link pos-absolute">
                  <li>
                    <a href="#" data-toggle="modal">
                      <i class="icon-shopping-cart"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="icon-heart"></i>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="product__content m-t-20">
                <a href="product-single-default.html" class="product__link">Product 5</a>
                <div class="product__price m-t-5">
                  <span class="product__price">$12.99</span>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <!-- End Single Tab Item -->
    </div>
  </div>
</div>

css 垂直产品视图

1条答案

相关问题

热门标签

最新问答