php - 使用 PHP 和 mysql 连续引导 2 张卡片
问题描述
我正在尝试从数据库中获取数据,并在前端使用引导程序和 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>
解决方案
您的 row 和 cols 标记似乎已关闭。请将它们与生成两行的代码进行比较:
<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>
推荐阅读
- javascript - 未找到模块:错误:在 Vue 和 Laravel 中
- javascript - 用于 NodeJS 的轻量级 AWS S3 客户端
- azure - 使用scala检查parquet文件是否存在
- angular - 构建门户网站应用架构
- sql - 具有相同变量的多个插入语句
- azure-ad-b2c - 编排步骤前提条件适用于 OR 逻辑而不适用于 AND
- sharepoint - sharepoint 中的长 SQL 查询
- testing - Pact.net 合同协议文件未在指定目录中创建,尽管测试通过
- flutter - 如何在浏览器本地存储 Flutter Web 应用程序中保存对象列表
- flutter - 为什么在android studio中调试时颤动运行其他项目代码