Ruby on Rails：simple_form + Twitter Bootstrap 未显示答案

【问题标题】：Ruby on Rails: simple_form + Twitter Bootstrap not showing upRuby on Rails：simple_form + Twitter Bootstrap 未显示
【发布时间】：2013-10-17 20:54:44
【问题描述】：

我正在为我的网站上的新用户创建一个简单的注册表单。我已经安装了 simple_form bootstrap...

rails g simple_form:install --bootstrap

但是，它仍然没有显示和呈现为普通的 simple_form。

这是我的表单代码：

<h2>Sign up</h2>

<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name ), :html => {:class => 'form-horizontal' }) do |f| %>
  <%= f.error_notification %>


    <%= f.input :username, :required => true, class: "form-control"%>
    <%= f.input :first_name, :required => true, class: "form-control" %>
    <%= f.input :last_name, :required => true, class: "form-control" %>
    <%= f.input :twitter, class: "form-control", type: "text", placeholder: "Username" %>
    <%= f.input :bio, class: "form-control" %>
    <%= f.input :email, :required => true, :autofocus => true, class: "form-control" %>

  <div class="form-actions">
    <%= f.button :submit, "Sign up", class: "btn btn-primary btn-sm" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>

不知道我在这里做错了什么。提前致谢。

【问题讨论】：

当你说它没有渲染时，你的意思是生成HTML时出错了吗？或者 CSS 没有出现？还是别的什么？
道歉。我的意思是 CSS 没有显示出来。
你在 app/assets/stylesheets 中看到了 Boostrap 样式表吗？
我从未使用过 simple_form，所以我正在摸索着解决这个问题。但是，我确实注意到文档说：“您必须确保在应用程序中添加了 Twitter Bootstrap 资产的副本。”很有趣。

标签： ruby-on-rails ruby twitter-bootstrap

【解决方案1】：

示例应用程序here 提到了您需要如何单独下载 Bootstrap（他们使用 curl）并将其放在 vendor/assets/stylesheets/bootstrap.css 中。

请尝试一下。

【讨论】：

我试过了，但仍然一无所获。也许这是 HTML 没有正确生成的问题。
所以你确定它在供应商/资产中？然后执行“*= require_tree”。或清单中的“* = 需要 boostrap”。查看此链接：guides.rubyonrails.org/…

【解决方案2】：

听起来您的应用程序中没有安装 Bootstrap，或者您可能正在尝试使用 Bootstrap 3。当时我在 2013 年 10 月 13 日键入此内容时，Simple Form 不支持 Bootstrap 3。有关更多信息，请参阅 here细节。

这意味着您需要将 Bootstrap 2.x 添加到您的应用程序中，Vidya 已经提供了一些好的方向。

如果您有兴趣使用 gem 添加 Bootstrap 2.x，那么我在下面提供了 twitter-bootstrap-rails 的说明。请务必查看他们的readme，以防我遗漏了什么。

在你的 gemfile 中添加：

gem "twitter-bootstrap-rails", :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'

然后在 Rails 控制台上运行您的项目（我假设您需要较少的支持）：

bundle install
rails generate bootstrap:install less

根据您想要固定布局还是静态布局，请使用以下两行之一：

rails g bootstrap:layout application fixed
rails g bootstrap:layout application fluid

最后，编辑您的 application.css 文件（位于 app/assets/stylesheets 中），使其具有类似于以下示例的“需要 bootstrap_and_overrides”：

*= require_self
*= require bootstrap_and_overrides
*= require_tree .

我很确定现在默认情况下会发生这种情况，但您可能还想确认您的 application.js 中也有“需要 twitter/bootstrap”（在 app/assets/javascripts 中找到）。我的一个项目的例子如下：

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .

如果它仍然不起作用并且您添加了此 gem。请告诉我您使用的是什么版本的 ruby、rails、simple_form 和 twitter-bootstrap-rails。

【讨论】：