php - 使用 PHP 和 mysql Bootstrap 连续 2 张卡

Question

我正在尝试从数据库获取数据，在前端我使用 bootstrap 和 PHP 以 1 行 2 列的方式显示卡片中的数据。但是，我正在获取第一行的数据，但其余的卡片是下一张卡片

<?php
    $con = mysqli_connect('localhost', 'root', '', 'applicants');
    if (!$con)
    {
        die('Could not connect: ' . mysql_error());
    }
    $qry = "select * from feedback";
    $result = mysqli_query($con, $qry);

?>
<div class="main-content">
            <div class="main-content-inner">
                <div class="row"> 
                    <div class="col-6 mt-5">
                        <?php $i=0;
                        while ($row = $result->fetch_assoc()) {
                            $i++;?>
                            <?php if ($i %2 == 0){?>
                    <!-- <div class="row"> --> 
                    </div>
                    <div class="col-6 mt-5"><?php } ?>
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title"> <?php echo $row['username']?></h5>
                                <h6 class="card-subtitle mb-2 text-muted"><?php echo $row['email'] ?></h6>
                                <ul>
                                    <li>
                                        <div class="left alert alert-success" role="alert">
                                            <h6><?php echo $row['subject'] ?></h6>
                                            <p class="card-text"><?php echo $row['message'] ?></p>
                                        </div>
                                    </li>
                                </ul>                             
                            </div>
                        </div>
                        <?php if ($i %2 == 0){?>
                    </div>
                    <!-- </div> --><?php } ?>
                <!-- </div> -->
                </div>
                <?php } ?>
            </div>
        </div>

Answer 1

您的行和列标签似乎已关闭。请将它们与生成两行的代码进行比较:

<div class="main-content-inner">

            <div class="row"> 
              <div class="col-6 mt-5">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title">Name</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Email</h6>
                    <ul>
                      <li>
                        <div class="left alert alert-success" role="alert">
                          <h6>Subject</h6>
                          <p class="card-text">Message</p>
                        </div>
                      </li>
                    </ul>                             
                  </div>
                </div>
              </div>

              <div class="col-6 mt-5">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title">Name</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Email</h6>
                    <ul>
                      <li>
                        <div class="left alert alert-success" role="alert">
                          <h6>Subject</h6>
                          <p class="card-text">Message</p>
                        </div>
                      </li>
                    </ul>                            
                  </div>
                </div>
              </div>
            </div>

            <div class="row"> 
              <div class="col-6 mt-5">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title">Name</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Email</h6>
                    <ul>
                      <li>
                        <div class="left alert alert-success" role="alert">
                          <h6>Subject</h6>
                          <p class="card-text">Message</p>
                        </div>
                      </li>
                    </ul>                             
                  </div>
                </div>
              </div>

              <div class="col-6 mt-5">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title">Name</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Email</h6>
                    <ul>
                      <li>
                        <div class="left alert alert-success" role="alert">
                          <h6>Subject</h6>
                          <p class="card-text">Message</p>
                        </div>
                      </li>
                    </ul>                            
                  </div>
                </div>
              </div>
            </div>

</div>