无法一起工作 Masonry 和 Bootstrap

Question

我的网站的基本结构是这样的：

<div class="container-fluid">
  <div class="row masonry-container">
    <div class="col-md-4 item">
      <div class="panel">
       Panel content here.
      </div>
    </div>
 <!-- I have 15 col-md-4 and panel before closing my row and container -->
  </div>
</div>

每个面板内部都有一些链接，这些链接来自 Wordpress while 循环。因此，我所有的面板都有不同的高度，我想使用 Masonry 风格的网格，这样我就可以优雅地适应它们。

我的 Masonry 脚本是这样的：

<script>
$('.masonry-container').masonry({
  itemSelector: '.item', 
  columnWidth: '.panel',
  percentPosition: true
});
</script>

这是我第一次尝试使用砖石网格，它没有用，但我不知道问题出在哪里。

编辑

这是我正在工作的网站的屏幕。正如您所看到的，网格正在就位，就好像 Masonry 不存在一样，就像 Bootstrap 默认网格一样。 Screen of my website

Answer 1

将您的砌体脚本更改为：

$(function(){
  $('.masonry-container').masonry({
    itemSelector: '.item', 
    columnWidth: '.panel',
    percentPosition: true
  });
});

您的页面出现类似 Object doesn't support property or method 'masonry' 的错误，因此您需要延迟执行脚本，直到页面加载完成。这是 jQuery 中 $(document).ready() 的 shorthand 版本的示例，如此处所示 https://learn.jquery.com/using-jquery-core/document-ready/

无法一起工作 Masonry 和 Bootstrap

Can't get to work Masonry and Bootstrap together

jquery

twitter-bootstrap

masonry