Javascript 我的砖石图像只显示在一列中

我在OMR一个月rails教程中遇到了问题。我正在做一个Pinteresing式的布局，可以在调整窗口大小时移动照片。我几乎完全遵循了教程

但是，这些照片并没有填满页面布局。该网站正在拍摄我的照片并将其列为一列：

/app/assets/javascripts/photos.js.coffee：

$ ->
  $('#photos').imagesLoaded ->
    $('#photos').masonry
      itemSelector: '.bot'
      isFitWidth: true

index.html.erb：

<div id="photos" class="transitions-enabled">
  <% @photos.each do |photo| %>
    <div class="bot panel panel-default">
      <%= image_tag photo.image.url(:medium) %>
      <div class="panel-body">
        <%= photo.description %>
        <%= photo.user.email if photo.user %>
        <%= link_to 'Show', photo_path(photo) %>
        <% if photo.user == current_user %>
          <%= link_to 'Edit', edit_photo_path(photo) %>
          <%= link_to 'Destroy', photo, method: :delete, data: { confirm: 'Are you sure?' } %>
        <% end %>
      </div>
    </div>
  <% end %>
</div>

我如何使这些照片彼此相邻而不是在一列中进行布局？我将“box”改为“bot”，因为它与我拥有的另一个css文件冲突。但即使我改变了css，也没关系，因为它仍然显示为一列

编辑： 我能够通过我在网上找到的一些css来解决这个问题。 新photos.css.scss文件：

#photos {
  margin: 0 auto;
}

.bot {
 margin:5px;
 padding:5px;
 font-size: 11px;
 line-height: 1.4em;
 float: left;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 box-shadow: 1px 1px 10px #444;
 width: 214px;
}

.bot img {
 display: block;
 width: 100%;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

这解决了我的单列问题。然而，现在我的照片幻灯片之间有很大的间隙，就像这样：

我想出来了。。。 OMR教程提供了

//=需要树

线路。由于另一段jquery中的一些错误，我已经排除了这一行。我没有手动插入我的密码

//=需要照片

线路。我只包括了

//=需要砌筑/jquery.mashing

线路。 它在生产中起作用，但在开发中的表现稍有不同，这对我来说很好

#photos {
  margin: 0 auto;
}

.bot {
 margin:5px;
 padding:5px;
 font-size: 11px;
 line-height: 1.4em;
 float: left;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 box-shadow: 1px 1px 10px #444;
 width: 214px;
}

.bot img {
 display: block;
 width: 100%;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}