如何将引导 css 应用于 rails 中的 simple_form_for 表单？答案

【问题标题】：How to apply bootstrap css to simple_form_for form in rails?如何将引导 css 应用于 rails 中的 simple_form_for 表单？
【发布时间】：2013-03-02 09:22:09
【问题描述】：

我有一个这样的 simple_form

<%= simple_form_for(@name) do |f| %>
  <%= f.error_notification %>
  <div class="form-inputs">
    <%= f.input :fname %>
    <%= f.input :lname  %>
    <%= f.input :body %>        
  </div>

  <%= f.button :submit, 'submit' %>
<% end %>

我想让标签水平并对其应用其他引导代码，但我无法弄清楚如何做到这一点，因为 simple_form_for 没有像 form_for 这样的任何 div。

谢谢

【问题讨论】：

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

【解决方案1】：

gem 网站上有很好的解释：https://github.com/plataformatec/simple_form

1) 通过运行为 simpleform 生成 twitter 引导配置：

rails generate simple_form:install --bootstrap

2) 按照示例应用程序中的示例进行操作：https://github.com/rafaelfranca/simple_form-bootstrap/blob/master/app/views/articles/_form.html.erb

<%= simple_form_for @name, :html => { :class => 'form-horizontal' } do |f| %>

  <%- if f.error_notification %>
    <div class="alert alert-error fade in">
      <a class="close" data-dismiss="alert" href="#">&times;</a>
      <%= f.error_notification %>
    </div>
  <%- end %>

  <div class="form-inputs">
    <%= f.input :fname %>
    <%= f.input :lname  %>
    <%= f.input :body %>        
  </div>

<% end %>

【讨论】：

【解决方案2】：

来自simple_form docs

SimpleForm 可以轻松集成到 Twitter Bootstrap。为此，您必须使用安装生成器中的引导选项，如下所示：

rails 生成 simple_form:install --bootstrap

您必须确保在您的应用程序中添加了 Twitter Bootstrap 资产的副本。

有关更多信息，请参阅生成器输出、我们的示例应用程序代码和实时示例应用程序。

注意：SimpleForm 集成需要 Twitter Bootstrap 2.0 或更高版本。

【讨论】：