Mosonry Gallery图像无法正确显示

时间:2017-11-01 16:47:48

标签: ruby-on-rails masonry

我正在关注John Edler的Ruby on Rails教程。当我渲染应用程序初始看起来很好,但是当我开始单击主页或导航栏上的品牌时,所有图像(引脚)显示回垂直,但每次刷新浏览器它再次看起来很好,但事实并非如此。我不确定问题是什么,希望有人能帮助我。

的application.js

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

application.scss

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

...视图/针/ index.html.erb

<%= render '/home/jumbo' unless user_signed_in? %>
<p id="notice"><%= notice %></p>
<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/>
                <%= pin.user.name if pin.user %><br/>
                <% if pin.user==current_user %>
                <div class="panel-footer">
                  <%= link_to 'Edit', edit_pin_path(pin), class:'btn btn-primary' %>
                  <%= link_to 'Destroy', pin, method: :delete, class:'btn btn-primary', data: { confirm: 'Are you sure?' } %><br/>
               </div>
                <% end %>
                </div>
            </div>
        </div>
    <% end %>
</div>

...视图/家/ _header.html.erb

<nav class="navbar navbar-inverse" role="navigation">
  <div class="collapse navbar-collapse" id="navbarNav">
    <div class="navbar-nav">

      <ul class="nav nav-pills">
        <li class="nav-item"><%= link_to 'Tsarong', pins_path, class:"navbar-brand"%></li>
        <li><%= link_to 'Home', root_path %> </li>
        <li><%= link_to 'About App', home_about_path %></li>
        <% if user_signed_in? %>
        <%= javascript_include_tag :defaults %>
          <li><%= link_to 'Add Pin', new_pin_path %></li>
          <li><%= link_to 'List Pins', pins_path %></li>
          <li><%= link_to 'Edit Profile', edit_user_registration_path %></li>
          <li><%= link_to 'Sign out', destroy_user_session_path, :method => :delete  %></li>
        <% else %>    
          <li><%= link_to 'Login', new_user_session_path %></li>
          <li><%= link_to 'Join', new_user_registration_path%></li>
        <% end %>
      </ul>
    </div>
  </div>
</nav>

非常感谢您的帮助!

2 个答案:

答案 0 :(得分:0)

尝试关闭应用程序中的turbolinks。也许你得到一个错误,因为砌体脚本没有正确处理turbolink重新加载:

  1. 从Gemfile中删除gem turbolinks行。
  2. //= require turbolinks中删除app/assets/javascripts/application.js
  3. "data-turbolinks-track" => true
  4. 中删除两个app/views/layouts/application.html.erb哈希键/值对

答案 1 :(得分:0)

谢谢你 - Anton Tkachov! 我从Gemfile中删除了gem turbolinks行并删除了// =需要来自app / assets / javascripts / application.js的turbolinks。 现在它有效!!!谢谢!