form-horizo​​ntal不使用bootstrap-sass rails gem

Question

我从Devise gem获取并编辑了以下new.html.erb。

<h2>Sign in</h2>

<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name), html:{class: "form-horizontal"}) do |f| %>

<%= f.input :email%>
<%= f.input :password%>
<%= f.input :remember_me, as: :boolean%>

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

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

但它返回以下http://imgur.com/3l4rLTW

如图所示，表单没有采用bootstrap中的form-horizo​​ntal属性。表单描述在上面而不是在下面，并且以某种方式，复选框一直向右。

我做错了什么？我正在关注One Month rails教程，当我跟着视频

时，它工作正常

Answer 1

我发现ruby gems存在问题...当你将gem 'simple_form'放入你的gem文件后运行bundle install时，它仍然会安装版本3.0.2而不是github的最新版本（ 3.1rc）。

你可以做的是在你的gemfile中安装它：gem 'simple_form', github: 'plataformatec/simple_form', branch: 'master'

然后运行bundle install。它应该将您的gem更新为正确的版本（3.1rc）。然后，再次运行rails generate simple_form:install --bootstrap。每次因冲突而停止时，键入“y”，然后按Enter键覆盖导致冲突的旧初始化程序文件。终止rails服务器，然后重新打开。如果你的代码是正确的，那么你应该去看看工作引导程序的简单形式。

例如：

'<%= simple_form_for(@story, html: { class: 'form-horizontal' }) do |f| %>`

Answer 2

为了正确显示，您的代码缺少大量classes。

Bootstrap Form-Horizontal Doc

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">
            <h1>Sign in</h1>
        </div>
    </div>
    <div class="panel-body">
        <%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>

          <div class="form-group">
            <%= f.label :email %>
            <%= f.email_field :email, class: "form-control", :autofocus => true %>
            </div>

          <div class="form-group">
            <%= f.label :password %>
            <%= f.password_field :password, class: "form-control" %>
          </div>

        <div class="form-group">
            <div class="checkbox">
                <%= f.check_box :remember_me %> 
                <%= f.label :remember_me %>
            </div>
        </div>

          <div class="form-group">
            <%= f.submit "Sign in", class: "btn btn-primary" %>
          </div>
        <% end %>
    </div>
    <div class="panel-footer">
        <%= render "devise/shared/links" %>
    </div>
</div>