如何在响应式网格缩小时避免差距？

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>