چطور میشه لیستی از کارت‌ ها رو به صورت افقی تو بوت استرپ اسکرول‌ پذیر کرد؟

Horizontally scrollable list of cards in Bootstrap

سلام من میخوام توی پروژه‌ام یه لیست از کارت‌ها رو به صورت افقی اسکرول‌ پذیر نمایش بدم. توی بوت استرپ چطور میشه این کار رو انجام داد؟

سلام برای اینکه کارت‌ها رو به صورت افقی اسکرول‌ پذیر توی بوت استرپ نمایش بدی، میتونی از کلاس‌های بوت استرپ و یکم CSS استفاده کنی. اینجا یه راهکار ساده برات دارم:

اول کارت‌ها رو توی یه کانتینر قرار بده که قابلیت اسکرول افقی رو داشته باشه.

بعد برای اینکه اسکرول افقی فعال بشه، باید از CSS برای تنظیم overflow استفاده کنی.

<!DOCTYPE html> 
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Scrollable Cards</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
      <style> 
        .scroll-container {
             overflow-x: auto; white-space: nowrap; 
         } 
        .card { 
             display: inline-block; margin-right: 10px; width: 18rem; /* Adjust width as needed */ 
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div class="scroll-container">
            <div class="card" style="width: 18rem;">
               <img src="https://via.placeholder.com/150" class="card-img-top" alt="..."> 
               <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a> 
               </div>
            </div>
            <div class="card" style="width: 18rem;">
               <img src="https://via.placeholder.com/150" class="card-img-top" alt="..."> 
               <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a> 
               </div>
            </div>
            <!-- Add more cards as needed --> 
         </div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> 
   </body>
</html>

scroll-container برای تنظیم اسکرول افقی استفاده میشه با overflow-x: auto; باعث میشه که وقتی محتوا بیشتر از عرض کانتینر باشه، اسکرول افقی فعال بشه.

white-space:nowrap باخاصیت باعث میشه کارت‌ها به صورت افقی کنار هم قرار بگیرن.

display: inline-block ام برای کارت‌ها استفاده شده تا به صورت افقی کنار هم قرار بگیرن.