水平形式不适用于bootstrap-sass rails gem

Question

I have the following new.html.erb taken and edited from the Devise gem.

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

but it returns the following instead http://imgur.com/3l4rLTW

As displayed in the picture, the form did not take upon the form-horizontal property in bootstrap. The form description is above instead of next to, and somehow the checkbox is all the way to the right.

What did I do wrong? I am following the One Month rails tutorial and it worked when I followed along with the video

Answer 1

I found out that there is a problem with ruby gems... when you run bundle install after putting gem 'simple_form' into your gem file, it will still install version 3.0.2 instead of the newest version from github (3.1rc).

What you can do is install this within your gemfile instead: gem 'simple_form', github: 'plataformatec/simple_form', branch: 'master'

Then run bundle install. It should update your gem to the correct version (3.1rc). Then, run rails generate simple_form:install --bootstrap again. Every time it stops with a conflict, type 'y' and then hit enter to overwrite those old initializer files causing the conflict. Terminate the rails server, and then turn it back on. You should be good to go and see the working bootstrap simple-forms if your code is correct.

For example:

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

Answer 2

You're code is lacking a lot of classes in order to properly display.

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>