簡體   English   中英

使用PHP和mysql連續引導2張卡

[英]Bootstrap 2 cards in a row using PHP and mysql

我試圖從數據庫中獲取數據,並且在前端,我使用引導程序和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>

您的行和列標簽似乎已關閉。 請與生成兩行的代碼進行比較:

<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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM