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

Question

这是我在 Whosebug 上的第一个问题。

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

我该怎么做才能解决这个问题。

Answer 1

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

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

和 Learn more link.

一个解决方案是将 bootstrap.min.css 添加到您在 heroku 中的文件，并且不再使用 CDN。另一种方法是使用安全版本的 CDN link，使用 https。即https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

如果有帮助，+1 并接受。

Answer 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"

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

Rails4 application on Heroku, Bootstrap work

safari

google-chrome

heroku

twitter-bootstrap

ruby-on-rails-4