如何在響應式網格縮小時避免差距？

Question

我已經奠定了作爲使用引導網格頁：

HTML

<div class="postrow row"> 
    <article class='post-listview col-lg-3 col-md-6 col-sm-6 col-xs-6'> 
     <div class='articleinner'> 
     <div class='thumbandtitle'> 
      <img src="x" class="img-responsive post-thumbnail"> 
      <div class="post-overlay"> 
       <div class="post-overlay-text"> 
        <h2><a href="x">abc</a></h2> 
        <p>xyz</p> 
       </div> 
      </div> 
     </div> 
     <p class='post-info'> 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
      <span class='separator'></span> 
      <span class='tagspan'><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
      <span class='separator'></span> 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
     </p> 
     </div> 
    </article> 
</div> 

如預期的電網響應，感謝col類。但是，縮小時，任何單獨的盒子（<article>）由於其內容的包裝可能會比其他盒子更高或更短。當發生這種情況，它導致行之間的巨大差距如下圖所示：

我怎樣才能消除這些差距？我在row div之後嘗試使用<div class="clearfix"></div>，但它沒有幫助，因爲當行本身在較小的屏幕上進行換行時，這些差距就會出現。在更大的屏幕，網格看上去很完美：

UPDATE：這是不是vanburen指出的問題的重複，因爲答案在這個問題提出建議使用最小高度是不是我想。我需要我的網格物品互鎖，而在元素上使用最小高度（article標籤）如果內容小於填充最小高度的元素，仍然會在這些元素之間引起間隙。

更新到VANBUREN的回答：這就是爲什麼你的解決方案並沒有爲我工作...的差距仍然存在，只是他們現在不太顯眼：

Answer 1

這是儘管這在許多情況下並不理想，所以您需要自己處理。

隨着可用網格的四層你一定會遇到問題 其中，在特定的斷點，您的列不清除非常正確的 一個比另一個高。要解決該問題，請使用 .clearfix和我們的responsive utility classes的組合。

你的設置是隻utilzing 2個斷點：（LG和XS因爲你的MD和SM是相同尺寸XS見Media Queries）

「這是手動和屏幕尺寸的變化很大，」我因爲您的特定網格被設計爲保持高於1200px，低於2列（col-lg-3 col-xs-6）的4列，所以這與實際相關的方式有所不同。您簡單地需要在其各自的斷點處清除這些列，就像它鏈接到的duplicate中所顯示的那樣。

查看工作示例代碼段。

@media (min-width: 1200px) { 
 
    .post-listview:nth-child(4n+1) { 
 
    clear: left; 
 
    } 
 
} 
 
@media (max-width: 1199px) { 
 
    .post-listview:nth-child(2n+1) { 
 
    clear: left; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="postrow row"> 
 

 
    <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
     <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
      <div class="post-overlay-text"> 
 
       <h2><a href="#">ONE</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
       book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchangeLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
     </p> 
 
     </div> 
 
    </article> 
 

 
    <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
     <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
      <div class="post-overlay-text"> 
 
       <h2><a href="#">TWO</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
       book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchange Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
 
       standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially 
 
       unchange 
 
       </p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
     </p> 
 
     </div> 
 
    </article> 
 

 
    <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
     <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
      <div class="post-overlay-text"> 
 
       <h2><a href="#">THREE</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
       Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into 
 
       electronic typesetting, remaining essentially unchange.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
     </p> 
 
     </div> 
 
    </article> 
 

 
    <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
     <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
      <div class="post-overlay-text"> 
 
       <h2><a href="#">FOUR</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
       book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchange setting industry. Lorem Ipsum has be</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
     </p> 
 
     </div> 
 
    </article> 
 

 
    <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
     <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
      <div class="post-overlay-text"> 
 
       <h2><a href="#">FIVE</a></h2> 
 
       <p>xyz</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
     </p> 
 
     </div> 
 
    </article> 
 

 
    <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
     <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
      <div class="post-overlay-text"> 
 
       <h2><a href="#">SIX</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
       book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchange Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
 
       </p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
     </p> 
 
     </div> 
 
    </article> 
 

 
    <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
     <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
      <div class="post-overlay-text"> 
 
       <h2><a href="#">SEVEN</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
       </p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
     </p> 
 
     </div> 
 
    </article> 
 

 
    <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
     <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
      <div class="post-overlay-text"> 
 
       <h2><a href="#">EIGHT</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
       book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchange Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
 
       </p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
     </p> 
 
     </div> 
 
    </article> 
 

 
    <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
     <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
      <div class="post-overlay-text"> 
 
       <h2><a href="#">NINE</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown 
 
       </p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
     </p> 
 
     </div> 
 
    </article> 
 

 
    </div> 
 
</div>

更新的砌體佈局

你綁建立一個砌體佈局，是不是本機的啓動過程。您可以將此jQuery Plugin應用於您的網格，以實現此目的。 （見imagesLoaded）

$('#masonry-container').imagesLoaded(function() { 
 
    $('#masonry-container').masonry({ 
 
    itemSelector: '.post-listview' 
 
    }); 
 
});

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
body { 
 
    position: relative; 
 
    overflow-x: hidden; 
 
} 
 
.post-listview { 
 
    padding: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.0/imagesloaded.pkgd.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="postrow row"> 
 
    <div id="masonry-container"> 
 

 
     <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
      <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
       <div class="post-overlay-text"> 
 
       <h2><a href="#">ONE</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
        book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchangeLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
 
        standard</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
      </p> 
 
     </div> 
 
     </article> 
 

 
     <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
      <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
       <div class="post-overlay-text"> 
 
       <h2><a href="#">TWO</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
        book. It has survived not only five centuries, but also the leap into electronic typesetting, rema 
 
       </p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
      </p> 
 
     </div> 
 
     </article> 
 

 
     <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
      <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
       <div class="post-overlay-text"> 
 
       <h2><a href="#">THREE</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
      </p> 
 
     </div> 
 
     </article> 
 

 
     <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
      <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
       <div class="post-overlay-text"> 
 
       <h2><a href="#">FOUR</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
        book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchange setting industry. Lorem Ipsum has been the industry's standard dum</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
      </p> 
 
     </div> 
 
     </article> 
 

 
     <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
      <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
       <div class="post-overlay-text"> 
 
       <h2><a href="#">FIVE</a></h2> 
 
       <p>xyz</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
      </p> 
 
     </div> 
 
     </article> 
 

 
     <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
      <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
       <div class="post-overlay-text"> 
 
       <h2><a href="#">SIX</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
        book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchange Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
 
       </p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
      </p> 
 
     </div> 
 
     </article> 
 

 
     <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
      <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
       <div class="post-overlay-text"> 
 
       <h2><a href="#">SEVEN</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
        book. It has survived not only five centuries, but also the leap into electronic typesetting, remain 
 
       </p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
      </p> 
 
     </div> 
 
     </article> 
 

 
     <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
      <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
       <div class="post-overlay-text"> 
 
       <h2><a href="#">EIGHT</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
        book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchange Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
 
       </p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
      </p> 
 
     </div> 
 
     </article> 
 

 
     <article class="post-listview col-lg-3 col-xs-6"> 
 
     <div class="articleinner"> 
 
      <div class="thumbandtitle"> 
 
      <img src="http://placehold.it/350x150" class="img-responsive post-thumbnail"> 
 
      <div class="post-overlay"> 
 
       <div class="post-overlay-text"> 
 
       <h2><a href="#">NINE</a></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
        book. 
 
       </p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <p class="post-info"> 
 
      <i class="post-icon post-date-icon fa fa-calendar"></i>time 
 
      <span class="separator"></span> 
 
      <span class="tagspan"><i class="post-icon post-author-icon fa fa-user"></i><a href="x">authorname</a></span> 
 
      <span class="separator"></span> 
 
      <span class='tagspan'><i class="post-icon post-tags-icon fa fa-tags"></i>tag1, tag2, tag3...</span> 
 
      </p> 
 
     </div> 
 
     </article> 
 

 
    </div> 
 
    </div> 
 
</div>