我正在使用php将数据库中的最后五个事件显示为最新事件。但是,当我希望它们显示3到一行而不是向下翻页时,引导程序和CSS使它们显示为一列。
我尝试使用CSS flex:row;等使其正常工作,但不确定引导是否将其弄乱了。
我希望在页面上显示三张卡片,然后在下一行显示第四张卡片,等等。我尝试使用第n个子卡片,但将每个卡片读为同一张卡片而不是不同的卡片是行不通的。有没有办法解决这个问题或我的代码有什么问题。任何帮助将不胜感激。
<link href="css/recentevents.css" rel="stylesheet" type="text/css"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<?php
$result = mysqli_query($connection, "SELECT e.*,(SELECT COUNT(*) FROM user_events WHERE Event_ID = e.Event_ID) AS total_registrations FROM Events e ORDER BY Event_ID DESC LIMIT 0 , 5");
while($row = mysqli_fetch_array($result))
{
$event = new Event($row);
$today = date("Y-m-d");
if($event->status == 'published' and $event->date >= $today){
?>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card">
<?php
echo'<img class="card-img-top" data-src=y=d ata-holder-rendered="true" width="600" src="data:image/jpg;base64,' . base64_encode( $row['event_image'] ) . '" />'
?>
<div class="card-body">
<h4 class="card-title"><?php echo $event->title?></h4>
<p class="card-text"><?php echo $event->content?></p>
<a href="events_page.php" class="btn btn-primary">Sign Up</a> </div> </div> </div>
</div>
</div>
<?php
}
}
?>
CSS class
.blank-section {
margin-bottom: 15px;
margin-top: 15PX;
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
margin-bottom: 15px;
}
我本来可以看到连续显示大约三张卡片,但是它们一直在向下显示。
它适用于下面的代码,它属于我网站的不同部分: 它适用于下面的代码,但我需要上面的代码
$result = mysqli_query($connection,"SELECT * FROM feedback");
while($row = mysqli_fetch_array($result))
{
echo " <div class=\"reviews\">\n";
echo " <div class=\"row blockquote review-item\">\n";
echo " <div class=\"col-md-3 text-center\">\n";
echo " <img class=\"rounded-circle reviewer\" src=\"images/davidPic.png\">\n";
echo " <div class=\"caption\">\n";
echo " <small>By <a href=\"images/davidPic.png\"> David</a></small>\n";
echo " \n";
echo " </div>\n";
echo " \n";
echo " </div>\n";
echo " <div class=\"col-md-9\">\n";
echo " <h4>".$row['name']."</h4>\n";
echo " <p class=\"review-text\">".$row['feedback']." </p>\n";
echo " \n";
echo " <small class=\"review-date\"></small>\n";
echo " </div> \n";
echo " </div> \n";
echo " </div>\n";
答案 0 :(得分:1)
我认为您需要更改每张卡的使用级别
您可以代替.col-lg-4
来代替.col-sm-4
例如,<div class="col-sm-4">
请参见以下示例:
.blank-section {
margin-bottom: 15px;
margin-top: 15PX;
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
border-radius: .25rem;
margin-bottom: 15px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<div class="container">
<div class="row">
<?php
$result = <your query>;
while($row = mysqli_fetch_array($result))
{
$event = new Event($row);
$today = date("Y-m-d");
if($event->status == 'published' and $event->date >= $today){
// output
?>
<div class="col-sm-4">
<div class="card">
image
<div class="card-body">
<h4 class="card-title">
title
</h4>
<p class="card-text">
content
</p>
<a href="events_page.php" class="btn btn-primary">Sign Up</a> </div>
</div>
</div>
</div>
<?php
}
?>
</div>