我试图用php实现bootstrap网格系统,下面是我想要的结果。
期望的结果
http://i.stack.imgur.com/Lsguz.jpg
但 我用下面的php代码得到了这个结果http://i.stack.imgur.com/9n8oZ.png。我不知道我在做什么。
<div class="row">
<div class="col-sm-2"></div>
<?
$sql = "SELECT id, title, article, date, file FROM article";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<div class='col-sm-2'>
<img src='article/image/".$row["file"]."' class='img-responsive' width='100%' height='100%'></img></a>
<h4><strong> ". $row["title"]. "</strong></h4>
<h5>
";
custom_echo ($row['content'],200);
echo "</h5><a href='/image/". $row["title"]. "'></h5><button type='button' class='btn btn-success'>Read More</a></di>";
}
}else{
echo "<div class='col-sm-8'>No article</div>";
}
$conn->close();
?>
</div>
<div class="col-sm-2">
有人能指出我达到预期结果的正确方法吗?
答案 0 :(得分:0)
<div class="row">
<?
$sql = "SELECT id, title, article, date, file FROM article";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<div class='col-sm-2'>
<img src='article/image/".$row["file"]."' class='img-responsive' width='100%' height='100%'></img>
<h4><strong> ". $row["title"]. "</strong></h4>
<h5>";
custom_echo($row['content'], 200);
echo " </h5>
<a href='http://link.to.article/' class='btn btn-success'>Read More</a>
</div>";
}
}else{
echo "<div class='col-sm-8'>No article</div>";
}
$conn->close();
?>
</div>