Heroku上的Rails4应用程序,Bootstrap工作

时间:2015-07-23 11:25:05

标签: twitter-bootstrap google-chrome ruby-on-rails-4 heroku safari

这是我关于Stackoverflow的第一个问题。

我正在开发基于RailsTutorial.org的Rails Web应用程序。我终于成功地在yurilliam.heroku.com上在线部署了我的应用程序。然而,似乎我只能在Safari上查看我的理想版本。似乎Bootstrap在IE,​​Chrome和Firefox上丢失了。

我可以做些什么来解决这个问题。

2 个答案:

答案 0 :(得分:2)

我可以在开发者控制台中清楚地看到一些mixed content警告。如果您修复它们,您的应用应该按预期开始工作。

替换

href="http://fonts.googleapis.com/css?family=Cookie"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"

使用

href="https://fonts.googleapis.com/css?family=Cookie"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"

理想情况下,不要为您的资产指定协议,以便浏览器可以根据请求选择协议。所以你也可以使用像

这样的东西
href="//fonts.googleapis.com/css?family=Cookie"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"

答案 1 :(得分:0)

如果您打开Mozilla Firefox控制台,安全选项卡会抛出以下错误:

Blocked loading mixed active content "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"

Learn more链接。

解决方案是将bootstrap.min.css添加到heroku中的文件中,而不再使用CDN。另一种方法是使用 https 来使用CDN链接的安全版本。那是https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

如果有帮助,请+1并接受。