[英]Showing 4 items at each row from MySQL table data inside HTML
I am working on a web-app that should show items from a MySQL database.我正在开发一个应该显示 MySQL 数据库中的项目的网络应用程序。
This is my current code:这是我当前的代码:
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
die ('Failed to connect to MySQL: ' . mysqli_connect_error());
}
mysqli_set_charset($conn, "utf8");
$sql = 'SELECT * FROM tb_tiendas';
$query = mysqli_query($conn, $sql);
?>
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<div class="col-xl-10" style="display: flex; justify-content: center;">
<?php
$i = 0;
$num_tiendas = mysqli_num_rows($query);
$path = "/administrar/application/admin/tiendas/";
while ($row = mysqli_fetch_array($query))
{
$foto = $row['imagen'];
$nombre = $row['nombre'];
$direccion = $row['direccion'];
$horario = $row['horario'];
?>
<div class="col-md-4">
<td><img width="280" height="200" src="<?php echo $path.$foto ?>"/></td>
<h4><?php echo $nombre ?></h4>
<h5><?php echo $direccion ?></h5>
<h6><?php echo $horario ?></h6>
</div>
<?php
$i++;
}
?>
</div>
</div>
</div>
</section>
What I need is to show 4 items on each row.我需要的是在每行显示 4 个项目。
How can I insert a new row of items every 4 items?如何每 4 个项目插入一行新项目?
if you are using Bootstrap 4, there is a class named .row
and inside it, you put your items in a div
with .col
class name, see:如果您使用的是 Bootstrap 4,则有一个名为.row
并在其中,您将您的项目放在一个名为.col
class 名称的div
中,请参阅:
....
<div class="row">
<div class="col"><?= $nombre ?></div>
<div class="col"><?= $direccion ?></div>
<div class="col"><?= $horario ?></div>
</div>
....
learn more about bootstrap 4 grid system here在此处了解有关 bootstrap 4 网格系统的更多信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.