响应引导CSS PHP错误

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

---

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

添加其他类，这个网站线

<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

这是一般情况。对于这样的情况下，引导提供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>'; 
     } 
    ?>