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>）可能会变得比其他盒子更高或更短。当发生这种情况时，它会导致行间的巨大差距，如下所示：

如何消除这些差距？我尝试在<div class="clearfix"></div> div之后使用row，但它没有帮助，因为当行本身包裹在较小的屏幕上时会出现这些间隙。在较大的屏幕上，网格看起来很完美：

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

更新到VANBUREN＆＃39;答案：这就是为什么你的解决方案对我不起作用......差距仍然存在，除了它们现在更少显眼：

Answer 1

这是来自文档，虽然在许多情况下这并不理想，所以你需要自己处理。

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

您的设置仅使用2个断点:( LG和XS，因为您的MD和SM与XS的大小相同见Media Queries）

“这是手动和屏幕尺寸可能会有很大差异”由于您的特定网格设计为容纳高于1200px和2列以下的4列（{{ 1}}）。您只需在我们链接到的duplicate中显示这些列，就可以在各自的断点处清除这些列。

请参阅工作示例摘录。

col-lg-3 col-xs-6

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

为砌体布局更新

你想要构建一个非本地引导的砌体布局。您可以将此jQuery Plugin应用于网格以实现此目的。（另见imagesLoaded）

<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>

$('#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;
}

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

1 个答案: