Question

这就是我需要的问题：

我网站项目的代码请帮我解决这个问题:( 究竟是什么问题???以及如何解决它感谢。

<?php
include 'init.php';
$stmt = $con->prepare("SELECT * FROM posts");
$stmt->execute();     
$rows = $stmt->fetchAll();
?>

<!-- fb like and share js code -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="container">
    <div class="panel panel-default">
        <div class="panel-title text-center">
            <h1>Dernière images</h1>
        </div>
    </div>

    <div class="row">
        <?php 
          foreach ($rows as $image) {
            echo '<div class="col-md-3 col-sm-4 ">';
                echo '<div class="thumbnail">';
                echo      '<h2 class="h4">'.$image['Name']. '</h2>';
                echo      '<div class="main">';
                echo      '<img src="data:image;base64,'.$image['Image'].' " alt="image name" title="image title" width="250" height="250" >';
                echo      '<div class="mask">';
                echo           '<div class="author">';
                echo              '<p>par<spane>oussama</spane></p>';
                echo           '</div>';
                echo           '<div class="focus">';
                echo                '<img class="img-focus" src="layout/images/search.png">';
                echo           '</div>';
                echo           '<div class="date">';
                echo                   '<p><span>14-05-2016</span><span>16:22</span></p>';
                echo            '</div>';
                echo       '</div>';
                echo   '</div>';
                echo      '<table class="table table-bordered">';
                echo          '<tr>';
                echo              '<td><div class="fb-like" data-href="https://fowajproject.com" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div></td>';

                echo              '<td><div class="fb-share-button" data-href="https://fowajproject.com" data-layout="button" data-mobile-iframe="true"></div></td>';

                echo              '<td><img class="center-block" alt="image title" src="layout/images/info/eye.png"></td>';
                echo          '</tr>';
                echo      '</table>';
                echo '</div>';
            echo '</div>';
          }
        ?>

    </div>

    <nav>
        <ul class="pagination">
            <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
            <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">2 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">3 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">4 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">5 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">6 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">7 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">8 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">9 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">10 <span class="sr-only">(current)</span></a></li>
            <li class="disabled"><a href="#" aria-label="next"><span aria-hidden="true">&raquo;</span></a></li>
        </ul>
    </nav>

    <?php include $tpl . 'footer.php';?>

请与我核实问题。

Answer 1

最好的方法是使用Masonry Plugin

或者您可以限制块和图像的高度：

为此html行添加其他类

<div class="col-md-3 col-sm-4 card-item">

并将代码添加到css：

.card-item {
    height: 200px;
    overflow: hidden;
}
.card-item .thumbnail {
    max-height: 150px;
    overflow: hidden; 
}

Answer 2

这是一种常见情况。对于这种情况，Bootstrap提供responsive column resets：

在四层网格可用的情况下，您必然遇到一些问题，在某些断点处，您的列不能完全正确，因为一个高于另一个。要解决此问题，请使用.clearfix和responsive utility classes的组合。

所以你需要在布局中添加两种块：

在每4列后添加<div class="clearfix visible-sm-block"></div>块。
在每3列后添加<div class="clearfix visible-md-block"></div>块。

例如：

    <?php
      counter = 0;
      foreach ($rows as $image) {
        echo '<div class="col-md-3 col-sm-4 ">';
        // ... here is the code of the thumbnail ...
        echo '</div>';

        counter += 1;
        if (counter % 4 == 0) echo '<div class="clearfix visible-sm-block"></div>';
        if (counter % 3 == 0) echo '<div class="clearfix visible-md-block"></div>';
      }
    ?>

响应bootstrap css php错误

2 个答案: