PHP 图片到 Bootstrap 缩略图不会内联
PHP Images into Bootstrap Thumbnails won't go inline
我有一个相对简单的 PHP 连接脚本到我的数据库中的 table。在这个 table 中,我有一个 link 我的图像文件的路径。我使用这样的语句调用图像:
$sql="SELECT * FROM table";
$result=mysql_query($sql);
然后用bootstrap将图像调用到缩略图中,如下所示:
<?php
while($rows=mysql_fetch_array($result)){
?>
<div class="container">
<div class="col-sm-8 col-md-4">
<div class="thumbnail">
<img src="<? echo $rows['image']; ?>" class="img-responsive">
<div class="caption">
<h3><? echo $rows['name']; ?></h3>
<p><? echo $rows['description']; ?></p>
<p><a href="#" class="btn btn-primary" role="button">Open Project</a></p>
</div>
</div>
</div>
</div>
<?php
}
mysql_close();
?>
图片已正确放置在缩略图中,但是当转到数据库中的下一条记录时,缩略图会放置在新行中。但是,在继续下一行之前,它应该有 3 个缩略图(3 个数据库记录)。
有谁知道如何解决此问题以便我可以连续显示 3 个缩略图?
试试这个。
<div class="container">
<div class="col-sm-8 col-md-4">
<?php while($rows=mysql_fetch_array($result)){ ?>
<div class="thumbnail">
<img src="<? echo $rows['image']; ?>" class="img-responsive">
<div class="caption">
<h3><? echo $rows['name']; ?></h3>
<p>
<? echo $rows[ 'description']; ?>
</p>
<p><a href="#" class="btn btn-primary" role="button">Open Project</a>
</p>
</div>
<?php } mysql_close(); ?>
</div>
</div>
</div>
并添加
.img-responsive{display:inline-block;}
给你的css。
应该这样做。
尝试添加 .row class:
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-4">
...
</div>
</div>
</div>
我有一个相对简单的 PHP 连接脚本到我的数据库中的 table。在这个 table 中,我有一个 link 我的图像文件的路径。我使用这样的语句调用图像:
$sql="SELECT * FROM table";
$result=mysql_query($sql);
然后用bootstrap将图像调用到缩略图中,如下所示:
<?php
while($rows=mysql_fetch_array($result)){
?>
<div class="container">
<div class="col-sm-8 col-md-4">
<div class="thumbnail">
<img src="<? echo $rows['image']; ?>" class="img-responsive">
<div class="caption">
<h3><? echo $rows['name']; ?></h3>
<p><? echo $rows['description']; ?></p>
<p><a href="#" class="btn btn-primary" role="button">Open Project</a></p>
</div>
</div>
</div>
</div>
<?php
}
mysql_close();
?>
图片已正确放置在缩略图中,但是当转到数据库中的下一条记录时,缩略图会放置在新行中。但是,在继续下一行之前,它应该有 3 个缩略图(3 个数据库记录)。
有谁知道如何解决此问题以便我可以连续显示 3 个缩略图?
试试这个。
<div class="container">
<div class="col-sm-8 col-md-4">
<?php while($rows=mysql_fetch_array($result)){ ?>
<div class="thumbnail">
<img src="<? echo $rows['image']; ?>" class="img-responsive">
<div class="caption">
<h3><? echo $rows['name']; ?></h3>
<p>
<? echo $rows[ 'description']; ?>
</p>
<p><a href="#" class="btn btn-primary" role="button">Open Project</a>
</p>
</div>
<?php } mysql_close(); ?>
</div>
</div>
</div>
并添加
.img-responsive{display:inline-block;}
给你的css。 应该这样做。
尝试添加 .row class:
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-4">
...
</div>
</div>
</div>