图片仍然是垂直的

Question

我网站上的图片是垂直排列的，我希望它们是水平的 为此，我使用了jQuery Mansonry 我添加了2个gemfile然后我按照文档和书中编辑了文件 网站没有显示错误，但图片仍然是垂直的; /

 gem 'jquery-turbolinks'
 gem 'masonry-rails'

/app/assets/stylesheets/application.css

 *= require 'masonry/transitions'
 *= require_self
 *= require_tree .
 */

/app/assets/javascripts/application.js

 //= require jquery
 //= require jquery.turbolinks
 //= require jquery_ujs
 //= require turbolinks
 //= require bootstrap-sprockets
 //= require bootstrap
 //= require masonry/jquery.masonry
 //= require_tree .

/app/assets/javascripts/pins.coffee

 $('#pins').imagesLoaded ->
 $('#pins').masonry
 itemSelector: '.box'
 isFitWidth: true

/app/assets/stylesheets/pins.scss

 #pins {
 margin: 0 auto;
 }

 .box {
 margin: 5px;
 width: 214px;
 }

 .box img {
 width: 100%;
 }

 /app/views/pins/index.html.erb

<div id="pins" class="transitions-enabled">
<% @pins.each do |pin| %>
<div class="box">
<div class="panel panel-default">
<%= link_to image_tag(pin.image.url(:medium)), pin %><br/>
<div class="panel-body">
<%= pin.description %><br/>
</div>
<% if pin.user == current_user %>
<div class="panel-footer">
<%= link_to 'edit', edit_pin_path(pin) %><br/>
<%= link_to 'delete', pin, method: :delete, data: { confirm: 'are you sure' } %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>