Question

我需要一个问题的帮助，我试图制作一个卡旋转木马，该卡从我的mysql数据库中获取数据，一切顺利，但是卡在彼此下显示，而不是应该在旋转木马/滑块中显示，任何想法我该如何解决这一问题以使其显示在一行中？这是我的代码和图片：

embedded image

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

Answer 1

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

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

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

我建议作为答案的代码使它更具可读性，这使得防止此类问题变得容易得多。缩进可以帮助您清楚地了解块/循环的起始位置和结束位置。

Working minimal fiddle here。

替换：

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>

Answer 2

您会如何处理此CSV文件？

从mysql获取数据后，轮播不立即显示卡

2 个答案: