0

我需要一些帮助来解决一个问题，我试图制作一个卡片轮播，从我的 mysql 数据库中获取数据，一切顺利，但卡片显示在彼此下方，不像它应该显示在轮播/滑块中，任何想法我怎么能解决这个问题以在一行中显示它们？这是我的代码和图片：

嵌入图像

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

2 回答 2

1

您在循环</div>内关闭 2 while，但它们在while循环之前被打开，您需要将它们添加到while循环的开头。

添加了一个条件来检查它是否是轮播中的第一个元素，如果是，则根据文档active的要求添加类。

需要初始活动元素 .active 类需要添加到其中一张幻灯片。否则，轮播将不可见。

我建议作为答案的代码使其更具可读性，这使得防止这种性质的问题变得更加容易。缩进可以帮助您清楚地看到块/循环的开始位置和结束位置。

在这里工作最小的小提琴。

代替：

<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>
于 2018-08-24T11:03:33.077 回答
0

这个css文件怎么样？你浮动图片div吗？

于 2018-08-24T11:02:48.513 回答