如何在 PHP 中水平对齐 Bootstrap 卡片答案

【问题标题】：How to align Bootstrap cards horizontally in PHP如何在 PHP 中水平对齐 Bootstrap 卡片
【发布时间】：2021-12-27 11:26:26
【问题描述】：

我在从 MySQL 数据库检索数据时遇到问题。我在前端使用 Bootstrap。我正在使用以下代码获取卡片：

<?php 
    require 'config.php';
      $sql = "SELECT * FROM contents";
        $query_run = mysqli_query($con, $sql);
        //Check if there is data
        $check_data = mysqli_num_rows($query_run) > 0;
        if($check_data) {
            while($row = mysqli_fetch_array($query_run)) {
?>
    
    <div class="card-group">
    <div class="container py-5">
                    <div class="row mt-4">
                        <div class="col-md-3">
                            <div class="card">
                                <div class="card-body">
                                    <img src="images/<?php echo $row['images'] ?>" class="card-img-top" alt="">
                                        <h2 class="card-title"><?php echo $row['title']; ?></h2>
                                        <h3 class="card-title"><?php echo $row['short_desc']; ?></h3>
                            <p class="card-text">
                            <?php echo $row['long_desc']; ?>
                            </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>

           <?php
       }
        }
    ?>

但是卡片是垂直而不是水平对齐的，这不是我想要的，如下所示：

【问题讨论】：

嗯，这可能是因为您将每张卡片都放入了自己的行元素中，开始时这没什么意义。
好的，让我尝试修复它。谢谢@CBroe

标签： php html css

【解决方案1】：

 

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
    
   <div class="row">
   
   
   <div class="col-3">
    <div class="card">
    <div class="card-body">
        <img src="https://tipsmake.com/data1/thumbs/how-to-extract-img-files-in-windows-10-thumb-bzxI4IDgg.jpg" class="w-100">
        <h5>Sample Img</h5>
    </div>
    </div>
   </div>
   
   <div class="col-3">
    <div class="card">
    <div class="card-body">
        <img src="https://tipsmake.com/data1/thumbs/how-to-extract-img-files-in-windows-10-thumb-bzxI4IDgg.jpg" class="w-100">
        <h5>Sample Img</h5>
    </div>
    </div>
   </div>
   
   <div class="col-3">
    <div class="card">
    <div class="card-body">
        <img src="https://tipsmake.com/data1/thumbs/how-to-extract-img-files-in-windows-10-thumb-bzxI4IDgg.jpg" class="w-100">
        <h5>Sample Img</h5>
    </div>
    </div>
   </div>
   
   <div class="col-3">
    <div class="card">
    <div class="card-body">
        <img src="https://tipsmake.com/data1/thumbs/how-to-extract-img-files-in-windows-10-thumb-bzxI4IDgg.jpg" class="w-100">
        <h5>Sample Img</h5>
    </div>
    </div>
   </div>
   
   </div>
  
</div>

</body>
</html>

这也是您想要的简单示例试试上面的代码

<div class="col-3">
        <div class="card">
        <div class="card-body">
            <img src="https://tipsmake.com/data1/thumbs/how-to-extract-img-files-in-windows-10-thumb-bzxI4IDgg.jpg" class="w-100">
            <h5>Sample Img</h5>
        </div>
        </div>
       </div>

上面的代码只放了你的while循环

【讨论】：

非常感谢@yashpatel。先生，我真的很感谢您的时间。但是，由于您更有经验，您能否帮助我并告诉我如果您不介意可能会出现什么问题。就像根据我的代码一样，是什么导致卡片垂直显示？
欢迎@han，为什么不呢，你可以看到你的输出，你可以这样做，还有很多其他的方法可以做到这一点
非常感谢我能做到这一点的任何方式都希望有多个。非常感谢您的宝贵时间先生

【解决方案2】：

<div class="card-group">
   <div class="container py-5">
      <div class="row mt-4">
         <?php $sql = "SELECT * FROM contents";
            $query_run = mysqli_query($con, $sql);
             //Check if there is data
              $check_data = mysqli_num_rows($query_run) > 0;
            
               if($check_data) {
                while($row = mysqli_fetch_array($query_run)) {
            
               ?>
         <div class="col-md-3">
            <div class="card">
               <div class="card-body">
                  <img src="images/<?php echo $row['images'] ?>" class="card-img-top" alt="">
                  <h2 class="card-title"><?php echo $row['title']; ?></h2>
                  <h3 class="card-title"><?php echo $row['short_desc']; ?></h3>
                  <p class="card-text">
                     <?php echo $row['long_desc']; ?>
                  </p>
               </div>
            </div>
         </div>
         <?php
            }
             }
            ?>
      </div>
   </div>
</div>

【讨论】：

非常感谢@yashpatel 的回答，但问题仍然存在。这可能是因为我的 CSS 吗？
对不起我的错误现在试试这个答案
我正在对我的回答进行一些编辑
好的先生。非常感谢您的帮助...