Changement de titre : Affichage vertical des produits

Question

Sur ma page Web, actuellement, les produits du projet sont répertoriés verticalement, ligne par ligne.

Je souhaite les afficher verticalement de manière déroulante.

Comment le changer en niveau ?

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>

Il s'agit de l'exemple de vue actuel, avec les éléments chargés verticalement.

Answer 1

J'ai ajouté une image fixe pour votre référence.

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

  

    

      
      

        

          


            
            
            

              

                
                  
                
                

                  

                    
                      
                    
                  
                  

                    
                      
                    
                  
                
              
              

                Product 1
                

                  .99
                
              
            

            
            

              

                
                  
                
                

                  

                    
                      
                    
                  
                  

                    
                      
                    
                  
                
              
              

                Product 2
                

                  .99
                
              
            

            
            

              

                
                  
                
                

                  

                    
                      
                    
                  
                  

                    
                      
                    
                  
                
              
              

                Product 3
                

                  .99
                
              
            

            
            

              

                
                  
                
                

                  

                    
                      
                    
                  
                  

                    
                      
                    
                  
                
              
              

                Product 4
                

                  .99
                
              
            

            
            

              

                
                  
                
                

                  

                    
                      
                    
                  
                  

                    
                      
                    
                  
                
              
              

                Product 5
                

                  .99