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

Question

我正在尝试在我的网站上设置Desandro的砌体，但到目前为止还没有成功。我想使用bootstrap列和缩略图来显示我的图像。问题是列垂直重叠。砌体脚本似乎正在将网格的高度更改为大约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>

我的CSS：

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

这是我的结果：

有人有什么想法吗？