如何在水平線上對齊 3 張卡片

Question

我最近開始使用 html、css 和 bootstrap-4，我正在嘗試制作一個帶有導航欄、4 張卡片和一個頁腳信息的頁面，我使用 bootstrap 來制作行和列，但它們似乎沒有對齊我多么想要。 在這個爛攤子里我能做什么？

     <!DOCTYPE html>
     <html lang="en" dir="ltr">
       <head>
         <meta charset="utf-8">
         <title></title>
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
               integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
               crossorigin="anonymous">
         <link rel="stylesheet" href="MYCELIUM.CSS">
         <link rel="stylesheet" href="activities.css">
       </head>
     
       <script src="https://kit.fontawesome.com/a8809e8f88.js" crossorigin="anonymous"></script>

       <body>
               <div  class="col-md-4 col-sm-6 boxy" class="wrapper">
     
               <div class="pop-up">
                   <div class="front">
                     <img class="girlimg" src="girl.jpg" alt="asdasda">
                     <p><h2 class="activname">Guided hiking tours</h2></p>
                     <button  class="activbutt" type="button" name="button">SEE DETAILS</button>
                     <div class="details">
                       <div class="duration">
                         <i class="fas fa-clock">Duration</i>
                       </div>
                       <div class="people">
                           <i class="fas fa-user-friends"></i><br>
                           <p>Max adults:10</p>
                       </div>
                       <div class="kids">
                         <i class="fas fa-child"></i><br>
                         <p>Max children:3</p>
     
                       </div>
     
                     </div>
     
                   </div>
               </div>
               <p></p><br>
               <div class="pop-up-2">
                 <div class="card-2">
                   <img class="girlimg" src="bike.jpg" alt="bikeactiv">
                   <p> <h2 class="activname1">Rent a bike(4 hours)</h2> </p>
                   <button class="activbutt1" type="button" name="button1">SEE DETAILS</button>
     
                 </div>
                 <div class="details">
                   <div class="duration1">
                     <i class="fas fa-clock">Duration</i><br>
                     <p></p>
                     <p> <span class="quarter">QUARTER DAY</span> </p>
                   </div>
                   <div class="adults">
                       <i class="fas fa-user-friends"></i><br>
                       <p>Max adults:10</p>
                   </div>
                   <div class="kids1">
                     <i class="fas fa-child"></i><br>
                     <p>Max children:3</p>
     
                   </div>
     
                 </div>
     
     
     
                 </div>
     
                 </div>
     
               </div>
               <div class="wrapper1">
     
     
               <div class="pop-up-3">
                   <div class="card-3">
                     <img  class="girlimg" src="climbing.jpg" alt="clim">
                     <p> <h2 class="climbing">Climbing</h2> </p>
                     <button class="activbutt1" type="button" name="button">SEE DETAILS</button>
     
                   </div>
                   <div class ="duration2">
                       <i class="fas fa-clock">Duration</i><br>
                       <p></p>
                       <p> <span>FULL DAY</span> </p>
                     </div>
                   <div class="adults1">
                     <i class="fas fa-user-friends"></i><br>
                     <p>Max adults:10</p>
                   </div>
                   <div class="kids2">
                     <i class="fas fa-child"></i><br>
                     <p>Max children:3</p>
     
               </div>
     
                 </div>
                 <div class="pop-up-4">
                   <div class="card-4">
                     <img  class="girlimg" src="canoe.jpg" alt="clim">
                     <p> <h2 class="climbing">Canoe</h2> </p>
                     <button class="activbutt1" type="button" name="button">SEE DETAILS</button>
     
                   </div>
                   <div class ="duration2">
                       <i class="fas fa-clock">Duration</i><br>
                       <p></p>
                       <p> <span class="quarter">QUARTER DAY</span> </p>
                     </div>
                   <div class="adults1">
                     <i class="fas fa-user-friends"></i><br>
                     <p>Max adults:6</p>
                   </div>
                   <div class="kids2">
                     <i class="fas fa-child"></i><br>
                     <p>Max children:2</p>
     
               </div>
             </div>
          </div>
       </body>
     </html>

Answer 1

你必須row ：基本結構：

<div class="row">
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
</div>

你可以讓它像這樣發展：

<div class="row">
   <div class="col row mx-0">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
   </div>
   <div class="col"></div>
   <div class="col"></div>
</div>

如何在水平線上對齊 3 張卡片

問題描述

1 個解決方案

解決方案1
0 已采納 2020-10-17 10:53:15

如何在水平線上對齊 3 張卡片

問題描述

1 個解決方案

解決方案1 0 已采納 2020-10-17 10:53:15

解決方案1
0 已采納 2020-10-17 10:53:15