使用Twitter Bootstrap在Rails中使用Masonry的问题。

Question

Here is a JSFiddle of what my site looks like currently: https://jsfiddle.net/4u4xx1yg/

There is an empty space between divs, which is why I'm trying to use Masonry to make the divs appear like this:

I'm using Bootstrap with Rails 4. I'm creating two columns with each_slice(). I tried the following, using the Masonry Rails gem , but it doesn't work yet:

<div id="masonry-container">
    <% @projects.each_slice(2) do |projects| %>
        <div class="col-md-6 box">
            <% projects.each do |project| %>
                  <p><%= project.name %></p>
            <% end %>
       </div>
    <% end %>
</div>

And I added this to application.js:

$(function(){
  $('#masonry-container').masonry({
      itemSelector: '.box',
  });
});

What am I doing wrong with Masonry?

In application.js, I have:

//= require masonry/masonry.min

And in application.css.scss, I have:

/*
*= require 'masonry/basic'
*/

Answer 1

I got this to work by editing the CSS of:

#masonry-container {
  margin: 0 auto;
}

.box {
  width:450px;
}