垂直删除 div 之间的空间 [Bootstrap 3]

Question

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

示例如下：

http://www.bootply.com/Hc2aO5o4bG

基本上，我需要删除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：(3n + 4)。我给了+ 4 不包括第一个孩子。

Answer 2

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

您还可以将 min-height 属性设置为 141px 之类的值，以便边框对齐。