Heroku bootstrap导航栏不呈现 [英] Heroku bootstrap navbar not rendering

查看：119
本文介绍了Heroku bootstrap导航栏不呈现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以...我有一个导轨应用程序，我使用了一个引导程序导航栏。这一切都在我的机器上本地工作，但推到Heroku后，它呈现一切接受导航栏。 查看heroku网站。如果您需要参考，请参阅链接到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>小石城自行车马球< / title> 
 
<！ - 元标记 - > 
< meta charset =utf-8> 
< meta http-equiv =X-UA-Compatiblecontent =IE = edge> 
< meta name =viewportcontent =width = device-width，initial-scale = 1> 
< meta name =authorcontent =Jonathan MacDonald> 
 
 <！ - 资产 - > 
<％= csrf_meta_tags％> 
 <％= stylesheet_link_tag'application'，media：'all'，'data-turbolinks-track'=> true％> 
<％= javascript_include_tag'application'，'data-turbolinks-track'=> true％> 
 
 <！ -   - 字体 - > 
< link href ='https：//fonts.googleapis.com/css？family = Special + Elite'rel ='stylesheet'type ='text / css'> 
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css> 
 
< / head> 
 
< body id =page-topdata-spy =scrolldata-target =。navbar-fixed-top> 
 
<！ - 导航 - > 
< nav class =navbar navbar-fixed-toproll =navigation> 
< div class =container> 
< div class =navbar-header page-scroll> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brand page-scrollhref =＃page-top>< img class =largesrc =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-scrollhref =＃page-top>< / a> 
< / li> 
< li> 
< a class =page-scrollhref =＃about>关于< / a> 
< / li> 
< li> 
< a class =page-scrollhref =＃rules>规则< / a> 
< / li> 
< li> 
< a class =page-scrollhref =＃where> Where Play< / a> 
< / li> 
< li> 
< a href =＃>博客< / a> 
< / li> 
< li class =dropdown> 
< a class =dropdown-toggledata-toggle =dropdownhref =＃>会员< b class =caret>< / b>< / a> 
< ul class =dropdown-menu> 
 <％if current_user％> <！ -  facebook登入 - > 
< li><％= link_to current_user.name，members_profile_path％>< / li> 
< li><％= link_toSign Out，sign_out_path，method：：delete％>< / li> 
<％else％> 
< li><％= link_toauth / facebookdo％><％=登入％><％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 =_ blankhref =https://twitter.com/lrbikepolo>< i class =fa fa-twitter fa-2x>< / i>< / A> 
< a target =_ blankhref =https://www.instagram.com/lrbikepolo>< i class =fa fa-instagram fa-2x>< / i> < / A> 
< a target =_ blankhref =https://www.facebook.com/lrbpolo>< i class =fa fa-facebook fa-2x>< / i> < / A> 
< / div> 
< / div> 
< / div> 
< / div> 
 
< / body> 
< / html>

assets / javascripts / application.js 

  // =要求主
 
 //导航徽标大小调整动画
 $（document） .on（scroll，function（）{
 if（$（document）.scrollTop（）> 50）{
 $（img）。removeClass（large）。addClass（ small）; 
} else {
 $（img）。removeClass（small）.addClass（large）; 
} 
}）; 
 $ b $ //关于部分切换
 $（function（）{
 $（'。accordion dd'）。filter（'：nth-​​child（n + 4）'） （）; 
 $（'。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 
 // =需要base / bootstrap 
 // =需要base / jquery 
 // =需要base / jquery.easing.min.js 
 // =需要base / scrolling-nav 
 // = require_tree。 
 
 //咖啡
 // =需要咖啡/家庭
 // =需要咖啡/会员
 // =需要咖啡/会话
 // =需要咖啡/欢迎



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.166dyno = web.1 connect = 0ms service = 11ms status = 200 bytes = 10449 
 2016-03-19T22：08：07.537387 + 00：00 app [ web.1]：2016-03-19 22:08:07 +0000 
 2016-03-19T22：08：07.539314 + 00：00 app [web.1]开始GET/为17.27.100.166 ：由WelcomeController处理＃index为HTML 
 2016-03-19T22：08：07.540567 + 00：00 app [web.1]：在布局/应用程序中呈现welcome / index.html.erb（0.1ms）
 2016-03-19T22：08：07.541641 + 00：00 app [web.1]：在2ms内完成200 OK（观看次数：1.4ms | ActiveRecord：0.0ms）
 2016-03-19T22：08： 07.818048 + 00：00 heroku [router]：at = info method = GET path =/ assets / application-52c2 922bf3888faae91327ac966f10f93474a159ef20a14180eb9bd164ed87cf.csshost = www.littlerockbikepolo.com request_id = f27d91a6-fbba-4806-a52c-918053fe5ce4 fwd =17.27.100.166dyno = 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.jshost = www.littlerockbikepolo.com request_id = 6afa7af1-775c-4ab6 -8e69-10869ebdfa8c fwd =17.27.100.166dyno = web.1 connect = 0ms service = 5ms status = 304 bytes = 133


解决方案

试试这个 

  https://www.bootstrapcdn.com

我只是包含这些链接，这对我来说很好。
对我来说这是很好的解决方案。
我也做了 - 1）耙资产：预编译; 2）config.assets.compile = true


So... I have a rails app where I am using a bootstrap navbar. It all works locally on my machine but after pushing to Heroku it renders everything accept the navbar. Take a look at the heroku site. Here is a link to the github repo if you need to reference it.

Things I've tried

I've run rake assets:precompile with no luck. I've added config/environments/production.rb to config.assets.compile = true which I read was bad for performance but tried it anyways just to see if it would work (which it didn't).

I apologize if the answer is on another post... I just feel like I've looked through most of them and tried everything I could find. I'm obviously missing something. Thanks in advance for your help.

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 logs

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

解决方案

Try this

https://www.bootstrapcdn.com

I just include that links and this work fine for me. For me that was good solution. Also I did - 1) rake assets:precompile; 2) config.assets.compile = true

这篇关于Heroku bootstrap导航栏不呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆