【问题标题】:Heroku bootstrap navbar not renderingHeroku引导导航栏不渲染
【发布时间】:2016-07-06 08:42:23
【问题描述】:

所以...我有一个使用引导导航栏的 Rails 应用程序。这一切都在我的机器上本地工作,但在推送到 Heroku 后,它使一切都接受导航栏。 Take a look at the heroku site。这里是link to the github repo,如果您需要引用它。

我尝试过的事情

我运行rake assets:precompile 没有运气。我已将config/environments/production.rb 添加到config.assets.compile = true,我读到这对性能不利,但无论如何都尝试了它只是为了看看它是否会起作用(它没有)。

如果答案在另一篇文章中,我深表歉意……我只是觉得我已经浏览了其中的大部分内容并尝试了我能找到的所有内容。我显然错过了一些东西。提前感谢您的帮助。

view/layout/application.html.erb

<!-- DOCTYPE -->
<!DOCTYPE html>
<html lang="en">
<head>

  <title>Little Rock Bike Polo</title>

  <!-- Meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Jonathan MacDonald">

  <!-- Assets -->
  <%= csrf_meta_tags %>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

  <!-- Fonts -->
  <link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

  <!-- Navigation -->
  <nav class="navbar navbar-fixed-top" roll="navigation">
    <div class="container">
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand page-scroll" href="#page-top"><img class="large" src="https://farm2.staticflickr.com/1478/24259118481_3bd44aea82_o.png"/></a>
      </div>

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="hidden">
            <a class="page-scroll" href="#page-top"></a>
          </li>
          <li>
            <a class="page-scroll" href="#about">About</a>
          </li>
          <li>
            <a class="page-scroll" href="#rules">Rules</a>
          </li>
          <li>
            <a class="page-scroll" href="#where">Where We Play</a>
          </li>
          <li>
            <a href="#">Blog</a>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Members<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <% if current_user %> <!-- facebook login -->
                <li><%= link_to current_user.name, members_profile_path %></li>
                <li><%= link_to "Sign Out", sign_out_path, method: :delete %></li>
              <% else %>
                <li><%= link_to "auth/facebook" do %><%= "Sign In" %><% end %></li>
              <% end %>
            </ul>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>

<%= yield %>

<!-- Footer -->
<div id="footer">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <a target="_blank" href="https://twitter.com/lrbikepolo"><i class="fa fa-twitter fa-2x"></i></a>
        <a target="_blank" href="https://www.instagram.com/lrbikepolo"><i class="fa fa-instagram fa-2x"></i></a>
        <a target="_blank" href="https://www.facebook.com/lrbpolo"><i class="fa fa-facebook fa-2x"></i></a>
      </div>
    </div>
  </div>
</div>

</body>
</html>

assets/javascripts/application.js

//= require main

// Nav logo resize animation
$(document).on("scroll",function(){
  if($(document).scrollTop()>50){
    $("img").removeClass("large").addClass("small");
  } else{
    $("img").removeClass("small").addClass("large");
  }
});

// About section toggle
$(function() {
    $('.accordion dd').filter(':nth-child(n+4)').hide();
    $('.accordion dl').on('click', 'dt', function() {
    $('.accordion dd').hide();
    $(this).siblings("dt").find("span").text("+");
    $(this).find("span").text("-");
    $(this).next().slideDown("slow");
  });
});

assets/javascripts/main.js

// Base
//= require base/bootstrap
//= require base/jquery
//= require base/jquery.easing.min.js
//= require base/scrolling-nav
//= require_tree .

// Coffee
//= require coffee/home
//= require coffee/members
//= require coffee/sessions
//= require coffee/welcome

Heroku 日志

2016-03-19T22:08:07.535722+00:00 heroku[router]: at=info method=GET path="/" host=www.littlerockbikepolo.com request_id=1b37aade-5d24-42df-bcf0-4a20e39fd5c3 fwd="17.27.100.166" dyno=web.1 connect=0ms service=11ms status=200 bytes=10449
2016-03-19T22:08:07.537387+00:00 app[web.1]: Started GET "/" for 17.27.100.166 at 2016-03-19 22:08:07 +0000
2016-03-19T22:08:07.539314+00:00 app[web.1]: Processing by WelcomeController#index as HTML
2016-03-19T22:08:07.540567+00:00 app[web.1]:   Rendered welcome/index.html.erb within layouts/application (0.1ms)
2016-03-19T22:08:07.541641+00:00 app[web.1]: Completed 200 OK in 2ms (Views: 1.4ms | ActiveRecord: 0.0ms)
2016-03-19T22:08:07.818048+00:00 heroku[router]: at=info method=GET path="/assets/application-52c2922bf3888faae91327ac966f10f93474a159ef20a14180eb9bd164ed87cf.css" host=www.littlerockbikepolo.com request_id=f27d91a6-fbba-4806-a52c-918053fe5ce4 fwd="17.27.100.166" dyno=web.1 connect=1ms service=11ms status=304 bytes=133
2016-03-19T22:08:07.819075+00:00 heroku[router]: at=info method=GET path="/assets/application-f821fc720db642f34d4224d955f8fc0293316f4f0986691d662afa916da4d0d1.js" host=www.littlerockbikepolo.com request_id=6afa7af1-775c-4ab6-8e69-10869ebdfa8c fwd="17.27.100.166" dyno=web.1 connect=0ms service=5ms status=304 bytes=133

【问题讨论】:

  • 部署后......你的heroku日志是什么样的......通常会发生这种情况,因为你的css中某处有错误。您通常可以从 heroku 日志中提取该错误。
  • 菜单在那里,但没有应用样式。您是否尝试过手动导入 Bootstrap(不是通过您的 CSS 文件)?
  • 当我在你的&lt;head&gt; 中链接到/assets/base/bootstrap.css 之前 CSS 被链接时,菜单工作(如预期)。
  • Like this@Roy?如果是这样...我部署了该更改并执行相同的操作。
  • 我在@toddmetheny 上面添加了日志。

标签: javascript css ruby-on-rails twitter-bootstrap heroku


【解决方案1】:

请尝试这个来解决问题(将&lt;link&gt; 元素添加到您的&lt;head&gt;):

<head>

<!-- Bootstrap first -->
<link rel="stylesheet" media="all" href="/assets/base/bootstrap.css"  type="text/css">

<!-- Your extra styling -->
<link rel="stylesheet" media="all" href="/assets/application-52c2922bf3888faae91327ac966f10f93474a159ef20a14180eb9bd164ed87cf.css" data-turbolinks-track="true" />

</head>

您与bootstrap.css 的链接无效,因为&lt;link &lt;href='/assets/base/bootstrap.css' 不是有效代码,请参阅href 之前的&lt;

【讨论】:

  • @eiei0 很高兴它成功了。确保也以相同的方式实现base/normalize.cssbase/scrolling-nav.css
  • 问题。知道为什么资产管道没有导入这些样式表吗?就像我说的,当我在本地运行 rails 服务器时它可以正常工作。只有当我遇到问题时才推送到 Heroku。 @罗伊
  • @eiei0 很难说,因为我不知道它是如何工作或应该工作的。在您的application-.css 中,您尝试在底部导入 CSS。也许它没有到达那里或正确捕捉它。
  • 老实说,我讨厌这样做,但这是我最需要知道的,因为它是一个 Rails 应用程序。我现在注意到移动浏览器上的视口缩放也很遥远。我将把它标记为尚未回答。
  • 我想我已经完成了this document 中的所有工作。快把我逼疯了!
【解决方案2】:

试试这个

https://www.bootstrapcdn.com

我只包含这些链接,这对我来说很好。 对我来说,这是一个很好的解决方案。 我也做了 - 1) rake assets:precompile; 2) config.assets.compile = true

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-16
    • 2020-10-11
    • 1970-01-01
    • 2016-06-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多