凡使用明確的修復HTML中的縮略圖動態畫廊

Question

裏面我有一個動態的畫廊，它的循環。 但我的畫廊大拇指亂了。 我使用了clearfix，它工作，但我按ctrl z，它沒有工作控制y。 所以我失去了它是我的錯誤與明確的修復。 所以，現在我行不通過側去我的意思是...... 我的拇指它不是從左至右開始。 它在左邊開始，並在下一行的頁面結尾處結束。 這是它的照片。

這裏是我的代碼：

<div class="container"> 
    <?php 
    $sql = "SELECT * FROM gallery ORDER BY id DESC LIMIT $start_from, $per_page"; 
    $run = mysqli_query($conn,$sql); 
    while ($rows = mysqli_fetch_assoc($run)) 
{ 
    echo' 
    <div class="row"> 

<div class="col-md-3 col-sm-2 "> 
<div class="thumbnail " id="real-estates-columns"> 
<div class="text-center">'.($rows['image'] == '' ? 'No Image' : '<img src="../'.$rows['image'].'" width="100%" >').'</div> 

<span class="label label-danger info pull-right"> 
<span data-toggle="tooltip" title="viewed"><b class="glyphicon glyphicon-filter"></b></span> 
<span data-toggle="tooltip" title="category">'.ucfirst($rows['category']).' </span> 
</span> 

<div class="title-realestates-columns caption"> 
<h3><a><strong>'.$rows['title'].'</strong></a></h3> 
    <!--p>'.substr($rows['description'],0,30).'...</p---> 

<div class="row"> 

<button type="button" class="btn btn-danger btn-block" data-toggle="modal" data-target="#info'.$rows['id'].'" ><span class="glyphicon glyphicon-info-sign"></span> Info</button> 
</div> 

</div> 
</div> 
</br> 
</div> 
</div>  
    '; 
    } 
    ?> 
</div> 

如果我拿出我的DIV CLASS =「行」我的環和我的班排的結束div太大，畫廊是這樣工作的。 ..

我怎樣才能解決這個問題？ 事情是clearfix，但是。

Answer 1

我找到了我行的解決方案

我在這個環節http://www.bluthemes.com/blog/3/clearing-bootstrap-3-columns

發現

這是固定一切的CSS。

/* Bootstrap Clearfix */ 

/* Tablet */ 
@media (min-width:767px){ 

/* Column clear fix */ 
.col-lg-1:nth-child(12n+1), 
.col-lg-2:nth-child(6n+1), 
.col-lg-3:nth-child(4n+1), 
.col-lg-4:nth-child(3n+1), 
.col-lg-6:nth-child(2n+1), 
.col-md-1:nth-child(12n+1), 
.col-md-2:nth-child(6n+1), 
.col-md-3:nth-child(4n+1), 
.col-md-4:nth-child(3n+1), 
.col-md-6:nth-child(2n+1){ 
clear: none; 
} 
.col-sm-1:nth-child(12n+1), 
.col-sm-2:nth-child(6n+1), 
.col-sm-3:nth-child(4n+1), 
.col-sm-4:nth-child(3n+1), 
.col-sm-6:nth-child(2n+1){ 
clear: left; 
} 
} 


/* Medium Desktop */ 
@media (min-width:992px){ 

/* Column clear fix */ 
.col-lg-1:nth-child(12n+1), 
.col-lg-2:nth-child(6n+1), 
.col-lg-3:nth-child(4n+1), 
.col-lg-4:nth-child(3n+1), 
.col-lg-6:nth-child(2n+1), 
.col-sm-1:nth-child(12n+1), 
.col-sm-2:nth-child(6n+1), 
.col-sm-3:nth-child(4n+1), 
.col-sm-4:nth-child(3n+1), 
.col-sm-6:nth-child(2n+1){ 
clear: none; 
} 
.col-md-1:nth-child(12n+1), 
.col-md-2:nth-child(6n+1), 
.col-md-3:nth-child(4n+1), 
.col-md-4:nth-child(3n+1), 
.col-md-6:nth-child(2n+1){ 
clear: left; 
} 
} 


/* Large Desktop */ 
@media (min-width:1200px){ 

/* Column clear fix */ 
.col-md-1:nth-child(12n+1), 
.col-md-2:nth-child(6n+1), 
.col-md-3:nth-child(4n+1), 
.col-md-4:nth-child(3n+1), 
.col-md-6:nth-child(2n+1), 
.col-sm-1:nth-child(12n+1), 
.col-sm-2:nth-child(6n+1), 
.col-sm-3:nth-child(4n+1), 
.col-sm-4:nth-child(3n+1), 
.col-sm-6:nth-child(2n+1){ 
    clear: none; 
    } 
.col-lg-1:nth-child(12n+1), 
.col-lg-2:nth-child(6n+1), 
.col-lg-3:nth-child(4n+1), 
.col-lg-4:nth-child(3n+1), 
.col-lg-6:nth-child(2n+1){ 
clear: left; 
} 
} 

Answer 2

你需要每4關口後添加clearfix

<?php 
if ($i%4 == 0){ ?> 
    <div class="clearfix"></div> 
<?php } ?> 

全碼：

<div class="container"> 
<?php 
$sql = "SELECT * FROM gallery ORDER BY id DESC LIMIT $start_from, $per_page"; 
$run = mysqli_query($conn,$sql); 
$i = 1; 
while ($rows = mysqli_fetch_assoc($run)) 
{ 
    echo' 
    <div class="row"> 
     <div class="col-md-3 col-sm-2 "> 
      <div class="thumbnail " id="real-estates-columns"> 
       <div class="text-center">'.($rows['image'] == '' ? 'No Image' : '<img src="../'.$rows['image'].'" width="100%" >').'</div> 

       <span class="label label-danger info pull-right"> 
        <span data-toggle="tooltip" title="viewed"><b class="glyphicon glyphicon-filter"></b></span> 
        <span data-toggle="tooltip" title="category">'.ucfirst($rows['category']).' </span> 
       </span> 

       <div class="title-realestates-columns caption"> 
        <h3><a><strong>'.$rows['title'].'</strong></a></h3> 
        <!--p>'.substr($rows['description'],0,30).'...</p---> 

        <div class="row"> 
         <button type="button" class="btn btn-danger btn-block" data-toggle="modal" data-target="#info'.$rows['id'].'" ><span class="glyphicon glyphicon-info-sign"></span> Info</button> 
        </div> 
       </div> 
      </div> 
      </br> 
     </div>'; 
     if ($i%4 == 0){ ?> 
      <div class="clearfix"></div> 
     <?php } 
     echo' 
    </div>  
    '; 
    $i++; 
}?> 
</div>