Css 引导缩略图之间留有间隙

我正在尝试用大小不均的缩略图制作一个网格。但有些缩略图不均匀，导致某些行之间存在巨大的间隙。

我的缩略图上没有任何样式

有没有一种方法可以在不添加砖石/同位素/萨尔瓦托（Salvatore）之类的东西的情况下修复它

您可以使用两个

或两个

.row

标记，如下所示：

<div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <p>Thumbnail caption</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <p>Thumbnail caption</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <p>Thumbnail caption</p>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <p>Thumbnail caption</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <p>Thumbnail caption</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <p>Thumbnail caption</p>
      </div>
    </div>
  </div>
</div>

缩略标题

缩略标题

缩略标题

缩略标题

缩略标题

缩略标题

---

有关更多信息，请访问。

修复布局的最干净方法是使用砖石类型的布局。当处理混合大小的介质时，它将允许最平滑的外观，并且是一个非常流畅和响应迅速的布局。不过，如果你完全控制了网站上的数据/图像，我建议创建大小和类型相同的图像。如果你愿意，我可以提供一个我用带有缩略图和引导的砖石布局创建的示例

编辑以添加示例代码：

/* CSS styles */
.row {
    -moz-column-width: 12em;
    -webkit-column-width: 12em;
    -moz-column-gap: 1em;
    -webkit-column-gap:1em;  
    column-width: 12em;
    column-gap: 1em;
    column-fill: balance;
    width: 100%;
}

/* Outer div block */
.section-block {
    display: block;
    padding:  .25rem;
    width:  100%; 
}

/* Inner div block */
.section-item {
   position:relative;
   display: inline-block;
   width: 100%;
}

.section-item img{
    width: 100%;
}

//Wrapper for each img you are adding
<div class='section-block'>
    <div class='section-item'>
        <div>
            <a href='#' class='thumbnail' data-toggle='modal' data-target='#id'>
                <img src='/imgs/image.jpg'>
                <p class='caption'>Image Caption</p>
            </a>                            
        </div>
    </div>
</div>

/*CSS样式*/
.行{
-moz列宽：12em；
-webkit列宽：12em；
-莫兹柱间距：1米；
-webkit柱间距：1米；
列宽：12em；
柱间距：1米；
列填充：平衡；
宽度：100%；
}
/*外分区块*/
.分段块{
显示：块；
填充：.25rem；
宽度：100%；
}
/*内分区块*/
.分项{
位置：相对位置；
显示：内联块；
宽度：100%；
}
.章节项目img{
宽度：100%；
}
//您要添加的每个img的包装器

我将其与php结合使用，从数据库中获取所有图像，然后循环每个图像，并使用上述语法返回页面。这应该可以在不必使用任何额外的js库的情况下工作，而不必使用引导所使用的js库。这为您提供了一种在现代浏览器中非常灵敏的布局样式。

您能发布（编辑您的问题）您用于方法的代码吗？也许每行之间都有一个样式为“clear:All”的div，但它仍然看起来很糟糕，因为每个拇指的高度不同，所以我建议使用一些技巧使你的拇指保持同样的高度（你可以在网站上搜索这个，有很多解决方案）