- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我需要一些帮助来解决一个问题,我尝试制作一个卡片轮播从我的 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/
我在 JavaScript 文件中运行 PHP,例如...... var = '';). 我需要使用 JavaScript 来扫描字符串中的 PHP 定界符(打开和关闭 PHP 的 )。 我已经知道使
我希望能够做这样的事情: php --determine-oldest-supported-php-version test.php 并得到这个输出: 7.2 也就是说,php 二进制检查 test.
我正在开发一个目前不使用任何框架的大型 php 站点。我的大问题是,随着时间的推移慢慢尝试将框架融入应用程序是否可取,例如在创建的新部件和更新的旧部件中? 比如所有的页面都是直接通过url服务的,有几
下面是我的源代码,我想在同一页面顶部的另一个 php 脚本中使用位于底部 php 脚本的变量 $r1。我需要一个简单的解决方案来解决这个问题。我想在代码中存在的更新查询中使用该变量。 $name)
我正在制作一个网站,根据不同的情况进行大量 PHP 重定向。就像这样...... header("Location: somesite.com/redirectedpage.php"); 为了安全起见
我有一个旧网站,我的 php 标签从 因为短标签已经显示出安全问题,并且在未来的版本中将不被支持。 关于php - 如何避免在 php 文件中写入
我有一个用 PHP 编写的配置文件,如下所示, 所以我想用PHP开发一个接口(interface),它可以编辑文件值,如$WEBPATH , $ACCOUNTPATH和 const值(value)观
我试图制作一个登录页面来学习基本的PHP,首先我希望我的独立PHP文件存储HTML文件的输入(带有表单),但是当我按下按钮时(触发POST到PHP脚本) )我一直收到令人不愉快的错误。 我已经搜索了S
我正在寻找一种让 PHP 以一种形式打印任意数组的方法,我可以将该数组作为赋值包含在我的(测试)代码中。 print_r 产生例如: Array ( [0] => qsr-part:1285 [1]
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: What is the max key size for an array in PHP? 正如标题所说,我想知道
我正在寻找一种让 PHP 以一种形式打印任意数组的方法,我可以将该数组作为赋值包含在我的(测试)代码中。 print_r 产生例如: Array ( [0] => qsr-part:1285 [1]
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques
我在 MySQL 数据库中有一个表,其中存储餐厅在每个工作日和时段提供的菜单。 表结构如下: i_type i_name i_cost i_day i_start i_
我有两页。 test1.php 和 test2.php。 我想做的就是在 test1.php 上点击提交,并将 test2.php 显示在 div 中。这实际上工作正常,但我需要向 test2.php
我得到了这个代码。我想通过textarea更新mysql。我在textarea中回显我的MySQL,但我不知道如何更新它,我应该把所有东西都放进去吗,因为_GET模式没有给我任何东西,我也尝试_GET
首先,我是 php 的新手,所以我仍在努力学习。我在 Wordpress 上创建了一个表单,我想将值插入一个表(data_test 表,我已经管理了),然后从 data_test 表中获取所有列(id
我有以下函数可以清理用户或网址的输入: function SanitizeString($var) { $var=stripslashes($var); $va
我有一个 html 页面,它使用 php 文件查询数据库,然后让用户登录,否则拒绝访问。我遇到的问题是它只是重定向到 php 文件的 url,并且从不对发生的事情提供反馈。这是我第一次使用 html、
我有一个页面充满了指向 pdf 的链接,我想跟踪哪些链接被单击。我以为我可以做如下的事情,但遇到了问题: query($sql); if($result){
我正在使用 从外部文本文件加载 HTML/PHP 代码 $f = fopen($filename, "r"); while ($line = fgets($f, 4096)) { print $l
我是一名优秀的程序员,十分优秀!