PHP 图片到 Bootstrap 缩略图不会内联

Question

我有一个相对简单的 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 个缩略图？

Answer 1

试试这个。

<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。应该这样做。

Answer 2

尝试添加 .row class:

<div class="container">
   <div class="row">
     <div class="col-sm-8 col-md-4">
       ...
     </div>
   </div>
</div>

PHP 图片到 Bootstrap 缩略图不会内联

PHP Images into Bootstrap Thumbnails won't go inline

php

css

twitter-bootstrap-3