当响应式网格缩小时如何避免间隙？

Question

我使用 Bootstrap 将页面布局为网格：

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>，但这并没有帮助，因为当行本身包裹在较小的屏幕上时，就会出现这些间隙。在更大的屏幕上，网格看起来很完美：

更新：这不是 vanburen 指出的问题的重复，因为该问题中建议的答案建议使用 min-height ，这不是我想要的。我需要将网格项目互锁，而在元素（article 标签）上使用 min-height 如果它们的内容小于 min-height 填充的内容，仍会在这些元素内造成间隙。

更新 VANBUREN 的回答：这就是为什么您的解决方案对我不起作用...差距仍然存在，只是它们现在不那么明显了：

Answer 1

这来自文档，尽管在许多情况下这并不理想，因此您需要自己处理。

有了四个可用的网格层，您一定会遇到问题 在某些断点处，您的列并不清楚 一个比另一个高。要解决此问题，请使用组合 .clearfix 和我们的responsive utility classes。

您的设置仅使用 2 个断点：（LG 和 XS，因为您的 MD 和 SM 与 XS 大小相同，请参阅Media Queries）

“它是手动的，屏幕尺寸可能会有很大差异” 我不知道这实际上是如何关联的，因为您的特定网格被设计为在 1200 像素以上容纳 4 列，在 1200 像素以下容纳 2 列 (@987654327 @)。您只需在它们各自的断点清除这些列，就像我链接到的 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>

砌体布局更新

您要构建一个非 Bootstrap 原生的 Masonry 布局。不过，您可以将此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>