我需要一些帮助来解决一个问题，我尝试制作一个卡片轮播从我的 mysql 数据库获取数据，一切都很顺利，但是卡片显示在彼此下方，不像应该显示在轮播/ slider 中，任何想法我该如何解决这个问题以在一行中显示它们？ 这是我的代码和图片:
<?php
include_once 'includes/dbh.inc.php';
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<meta charset="utf-8">
<title>carusel</title>
</head>
<body>
<section class="container p-t-3">
<div class="row">
<div class="col-lg-12">
<h1>Bootstrap 4 Card Slider</h1>
</div>
</div>
</section>
<section class="carousel slide" data-ride="carousel" id="postsCarousel">
<div class="container">
<div class="row">
<div class="col-xs-12 text-md-right lead">
<a class="btn btn-outline-secondary prev" href="" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
<a class="btn btn-outline-secondary next" href="" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="container p-t-0 m-t-2 carousel-inner">
<div class="row row-equal carousel-item active m-t-0">
<div class="col-md-4">
<?php
$sql = "SELECT * FROM users;";
$results = mysqli_query($conn, $sql);
$resultCheck = mysqli_num_rows($results);
if ($resultCheck > 0){
while ($row = mysqli_fetch_assoc($results)) { ?>
<div class="card" style="width: 18rem;">
<div class="card-img-top">
<img class="img-fluid" src="<?php echo $row['avatar']; ?>" alt="Carousel">
</div>
<div class="card-body">
<h5 class="card-title"><?php echo $row['user_first'].' '.$row['user_last']; ?></h5>
<p><?php echo $row['card_text_profil']; ?></p>
<a href="<?php echo $row['profil_link']; ?>" class="btn btn-primary">Profil site</a>
</div>
</div>
<?php } ?>
<?php } ?>
</div>
</div>
</div>
</section>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</html>
最佳答案
您正在关闭 2 </div>里面while循环，但它们是在 while 之前打开的循环，您需要将它们添加到 while 的开头循环。
添加了一个条件来检查它是否是轮播中的第一个元素，如果是，则添加 active根据 documentation 的要求进行类(class).
Initial active element required The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
我建议作为答案的代码使其更具可读性，这使得防止这种性质的问题变得更加容易。缩进可以帮助您清楚地看到 block /循环的开始位置和结束位置。
替换:
<div class="container p-t-0 m-t-2 carousel-inner">
<div class="row row-equal carousel-item active m-t-0">
<div class="col-md-4">
<?php
$sql = "SELECT * FROM users;";
$results = mysqli_query($conn, $sql);
$resultCheck = mysqli_num_rows($results);
if ($resultCheck > 0){
while ($row = mysqli_fetch_assoc($results)) {
//echo '<tr><th scope="row">'.$row['user_id'].'</th><td>'.$row['user_last']."</td><td>".$row['user_uid']."</td></tr>";
/*echo '<div class="card" style="width: 18rem;">';
echo '<img class="card-img-top" src="'.$row['avatar'].'" alt="Card image cap">';
echo '<div class="card-body">';
echo '<h5 class="card-title">'.$row['user_first'].' '.$row['user_last'].'</h5>';
echo '<p class="card-text">'.$row['card_text_profil'].'</p>';
echo '<a href="'.$row['profil_link'].'" class="btn btn-primary">Profil site</a>';
echo '</div>';
echo '</div>';*/
echo '<div class="card" style="width: 18rem;">';
echo '<div class="card-img-top">';
echo '<img class="img-fluid" src="'.$row['avatar'].'" alt="Carousel">';
echo'</div>';
echo '<div class="card-body">';
echo '<h5 class="card-title">'.$row['user_first'].' '.$row['user_last'].'</h5>';
echo '<p class="card-text">'.$row['card_text_profil'].'</p>';
echo '<a href="'.$row['profil_link'].'" class="btn btn-primary">Profil site</a>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
}
}
?>
</div>
与:
<div class="container p-t-0 m-t-2 carousel-inner">
<?php
$sql = "SELECT * FROM users;";
$i = 1;
$results = mysqli_query($conn, $sql);
$resultCheck = mysqli_num_rows($results);
if ($resultCheck > 0){
while ($row = mysqli_fetch_assoc($results)) { ?>
<?php if($i % 2 != 0): //add new slider every odd row ?>
<div class="row row-equal carousel-item <?php echo ($i == 1) ? "active" : ""; ?> m-t-0">
<?php endif; ?>
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<div class="card-img-top">
<img class="img-fluid" src="<?php echo $row['avatar']; ?>" alt="Carousel">
</div>
<div class="card-body">
<h5 class="card-title"><?php echo $row['user_first'].' '.$row['user_last']; ?></h5>
<p><?php echo $row['card_text_profil']; ?></p>
<a href="<?php echo $row['profil_link']; ?>" class="btn btn-primary">Profil site</a>
</div>
</div>
</div>
<?php if($i % 2 != 0): //add new slider every odd row ?>
</div>
<?php endif; ?>
<?php $i++; } ?>
<?php } ?>
</div>
关于php - 从 mysql 获取数据后轮播不立即显示卡片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52002791/