垂直移除div之间的空间[Bootsrap 3]

Question

我需要删除一些div和div below that div之间的空间。如果某个div高于其他列，则创建空间。

这里是例子：

http://www.bootply.com/Hc2aO5o4bG

basicly我需要之间1. and 4.职位和2. and 5.并为低于它们的空间彼此的帖子删除空间。

还张贴应该按以下顺序：

1. 2. 3. 
4. 5. 6. 
7. ..... 

这是我试图完成：

Answer 1

给出明确之前4：

<div class="col-xs-12 col-md-4 hover"> 
    <!-- post thumbnail --> 
    <!-- /post thumbnail --> 
    <div class="content"> 
    <h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP &amp; MySQL]">IQ test [PHP &amp; MySQL]</a></h4> 
    <p> 
    </p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p>           <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&amp;action=edit">Edit This</a>           <p></p> 
    </div> 
    <a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/"> 
    <div class="link"> 
     <i class="fa fa-link"></i> 
    </div> 
    </a> 
</div> 
<div class="col-xs-12 col-md-4 hover"> 
    <!-- post thumbnail --> 
    <!-- /post thumbnail --> 
    <div class="content"> 
    <h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP &amp; MySQL]">IQ test [PHP &amp; MySQL]</a></h4> 
    <p> 
    </p><p>We have 4 cssssssssssssssssssssssssssssssssssss 
    ssssssssssssssssssssssssssssssssssssssssolumns: iq_id, iq_pit 
    anje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p>           <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&amp;action=edit">Edit This</a>           <p></p> 
    </div> 
    <a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/"> 
    <div class="link"> 
     <i class="fa fa-link"></i> 
    </div> 
    </a> 
</div> 
<div class="col-xs-12 col-md-4 hover"> 
    <!-- post thumbnail --> 
    <!-- /post thumbnail --> 
    <div class="content"> 
    <h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP &amp; MySQL]">IQ test [PHP &amp; MySQL]</a></h4> 
    <p> 
    </p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p>           <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&amp;action=edit">Edit This</a>           <p></p> 
    </div> 
    <a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/"> 
    <div class="link"> 
     <i class="fa fa-link"></i> 
    </div> 
    </a> 
</div> 
<div class="clear"></div> 
<div class="col-xs-12 col-md-4 hover"> 
    <!-- post thumbnail --> 
    <!-- /post thumbnail --> 
    <div class="content"> 
    <h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP &amp; MySQL]">IQ test [PHP &amp; MySQL]</a></h4> 
    <p> 
    </p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p>           <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&amp;action=edit">Edit This</a>           <p></p> 
    </div> 
    <a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/"> 
    <div class="link"> 
     <i class="fa fa-link"></i> 
    </div> 
    </a> 
</div> 
<div class="col-xs-12 col-md-4 hover"> 
    <!-- post thumbnail --> 
    <!-- /post thumbnail --> 
    <div class="content"> 
    <h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP &amp; MySQL]">IQ test [PHP &amp; MySQL]</a></h4> 
    <p> 
    </p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p>           <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&amp;action=edit">Edit This</a>           <p></p> 
    </div> 
    <a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/"> 
    <div class="link"> 
     <i class="fa fa-link"></i> 
    </div> 
    </a> 
</div> 
<div class="col-xs-12 col-md-4 hover"> 
    <!-- post thumbnail --> 
    <!-- /post thumbnail --> 
    <div class="content"> 
    <h4><a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/" title="IQ test [PHP &amp; MySQL]">IQ test [PHP &amp; MySQL]</a></h4> 
    <p> 
    </p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p>           <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&amp;action=edit">Edit This</a>           <p></p> 
    </div> 
    <a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/"> 
    <div class="link"> 
     <i class="fa fa-link"></i> 
    </div> 
    </a> 
</div> 

，让这个CSS

.clear { 
    clear: both; 
} 

从技术上讲，您必须每三排给予.clear，就您的情况而言！

预览：http://www.bootply.com/uC3qzah3f9

---

对于动态的解决方案：

/* Start Praveen's Reset for Fiddle ;) */ 
 
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} 
 
/* End Praveen's Reset for Fiddle ;) */ 
 
.posts {overflow: hidden;} 
 
.posts .post {border: 1px solid #999; padding: 10px; text-align: center; width: 32%; margin: 0.5%; float: left;} 
 
.posts .post:nth-child(3n+4):before {clear: both; display: block; content: " ";}

<div class="posts"> 
 
    <div class="post">Post #1</div> 
 
    <div class="post">Post #2</div> 
 
    <div class="post">Post #3</div> 
 
    <div class="post">Post #4</div> 
 
    <div class="post">Post #5</div> 
 
    <div class="post">Post #6</div> 
 
    <div class="post">Post #7</div> 
 
    <div class="post">Post #8</div> 
 
    <div class="post">Post #9</div> 
 
    <div class="post">Post #10</div> 
 
    <div class="post">Post #11</div> 
 
    <div class="post">Post #12</div> 
 
    <div class="post">Post #13</div> 
 
    <div class="post">Post #14</div> 
 
    <div class="post">Post #15</div> 
 
</div>

在上述情况下，则需要手动更改CSS：​​。我给+ 4不包括第一个孩子。

Answer 2

你应该<div class="row"></div>来包装你的行：http://getbootstrap.com/css/#grid

您还可以设置一个最小高度属性像141px，这样的边界排队。