Jquery 为什么我的Desandro砖块与引导柱垂直重叠？

我试图在我的网站上建立Desandro的砖石结构，但到目前为止还没有成功。我想使用引导列和缩略图来显示我的图像。问题是这些列垂直重叠。砌体脚本似乎正在将网格高度更改为大约400像素，考虑到我有9个缩略图，这是不正确的。有人有什么想法吗

我的HTML：

<div class="grid">
  <div class="col-sm-4 grid-item">
    <div class="thumbnail">
      <a href="{img_url}" rel="lightbox"><img src="{img_url}" alt="Filipino Moon Rise" data-image-url="{img_url}" /></a>
      <div class="thumbnail-caption">
        <h3>Filipino Moon Rise</h3>
        <p>A beautiful moon rise over the South China Sea.</p>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
  $('[data-image-url]').each(function(){
    $(this).attr('src', $(this).data('image-url'));
  })

    $('.grid').masonry({
    // options
    itemSelector: '.grid-item'
  });
});
</script>

这是我的结果：

---

有人有什么想法吗？

不要将引导网格用于砌体。砌体将应用自己的布局引擎。不要将引导网格用于砌体。砌体将应用它自己的布局引擎。

.row > .grid.item > .thumbnail {
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border: 0;
    color: #fff;
}
.grid {
    height: auto !important;
}