Heroku Bootstrap导航栏不渲染
[英]Heroku bootstrap navbar not rendering
问题描述
所以...我有一个Rails应用，我正在使用引导导航栏。 所有这些都可以在我的机器上本地运行，但是在推送到Heroku之后，它将使所有内容都接受导航栏。 看看heroku网站 。 如果您需要引用它，这是github仓库的链接 。
我尝试过的事情
我运行过rake assets:precompile没有运气的rake assets:precompile 。 我在config.assets.compile = true添加了config/environments/production.rb ，虽然这对性能不利，但无论如何都尝试了一下，只是看它是否可以工作（不可以）。
如果答案在其他帖子上，我深表歉意...我只是觉得我已经仔细阅读了其中的大部分内容，并尝试了所有可以找到的内容。 我显然缺少了一些东西。 在此先感谢您的帮助。
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
2 个解决方案
解决方案1
1 2016-03-19 22:36:31
请尝试解决此问题（将<link>元素添加到<head> ）：
<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无效，因为<link <href='/assets/base/bootstrap.css'是无效的代码，请参阅<之前的href 。
解决方案2
1 2016-04-03 13:31:42
尝试这个
https://www.bootstrapcdn.com
我只包含这些链接，对我来说效果很好。 对我来说，这是一个很好的解决方案。 我也做到了-1）耙资产：预编译； 2）config.assets.compile = true
本地主机和已部署（Heroku）之间的Rails / Bootstrap Navbar / jQuery差异
[英]Rails / Bootstrap Navbar / jQuery differences between localhost and deployed (Heroku)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.