Rails 4, Bootstrap 3, simple_form - stylizacja formularzy nie działa

Question

W przeszłości używałam szyn 3.x bootstrap 2.x i simple_form do wielkiego sukcesu. Jednak próbowałem stworzyć nową (nie uaktualnioną) aplikację Rails 4/Bootstrap 3 i chociaż można używać składni simple_form, a nawet używać form zagnieżdżonych, wygląda na to, że stylizacja nie działa. Użyłem formularzy rails-bootstrap na żadnej formie opartej na modelu i że stylizacja wygląda dobrze, jednak wolałbym używać simple_form w większości moich formularzy.

Moje pliki wyglądać następująco

gem

source 'https://rubygems.org' 

gem 'rails', '4.1.6' 
gem 'mysql2' 
gem 'jquery-rails' 
gem 'devise' 

gem 'sass-rails' 
gem 'coffee-rails', '~> 4.1.0' 
gem 'bootstrap-sass', '~> 3.2.0' 
gem 'autoprefixer-rails' 
gem 'therubyracer', '0.11.4', :platforms => :ruby 
gem 'uglifier', '>= 1.3.0' 
gem 'jquery-ui-rails' 
gem 'less-rails' 
gem 'font-awesome-rails' 
gem 'bootstrap_form' 

gem 'jbuilder', '~> 2.0' 
gem 'sdoc', '~> 0.4.0',   group: :doc 

gem 'jquery-turbolinks' 
gem 'turbolinks', '1.3.0' 

#Forms and user entry 
gem 'simple_form' 
gem 'cocoon' 
gem 'country_select' 
gem "ckeditor" 
gem "gon" 

application.css.scss

/* 
*= require_self 
*= require rails_bootstrap_forms 
*= require font-awesome 
*= require_tree . 
*/ 

@import "bootstrap-sprockets"; 
@import "bootstrap"; 

Mam dwóch inicjatorów, które nie zostały zmienione simple_form.rb i simple_form_bootstrap. rb

i formularz wyglądający jak następujący

<%= simple_form_for @item, :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 %> 

    <%= f.input :user_id, :as => :hidden, :input_html => { :value => @userid } %> 
    <%= f.association :category %> 
    <%= f.input :name %> 
    <%= f.input :description %> 

    <%= f.input :cool %> 
    <%= f.input :cold %> 


    <%= f.button :submit, :class => 'btn-primary' %> 
    <%= link_to t('.cancel', :default => t("helpers.links.cancel")), 
       items_path, :class => 'btn btn-default' %> 
<% end %> 

który wyprowadza się w następujący sposób

 <div class="control-group hidden item_user_id"><div class="controls"><input class="hidden" id="item_user_id" name="item[user_id]" type="hidden" /></div></div> 
     <div class="control-group select optional item_category"><label class="select optional control-label" for="item_category_id">Category</label><div class="controls"><select class="select optional" id="item_category_id" name="item[category_id]"><option value=""></option> 
<option selected="selected" value="1">Option 1</option> 
<option value="3">Option 2</option> 
<option value="4">Option 3</option> 
     <div class="control-group string optional item_name"><label class="string optional control-label" for="item_name">Name</label><div class="controls"><input class="string optional" id="item_name" name="item[name]" type="text" value="Underwear" /></div></div> 
     <div class="control-group string optional item_description"><label class="string optional control-label" for="item_description">Description</label><div class="controls"><input class="string optional" id="item_description" name="item[description]" type="text" value="test" /></div></div> 
     <div class="control-group boolean optional item_warm"><label class="boolean optional control-label" for="item_warm">Warm</label><div class="controls"><input name="item[warm]" type="hidden" value="0" /><label class="checkbox"><input checked="checked" class="boolean optional" id="item_warm" name="item[warm]" type="checkbox" value="1" /></label></div></div> 
     <div class="control-group boolean optional item_cool"><label class="boolean optional control-label" for="item_cool">Cool</label><div class="controls"><input name="item[cool]" type="hidden" value="0" /><label class="checkbox"><input checked="checked" class="boolean optional" id="item_cool" name="item[cool]" type="checkbox" value="1" /></label></div></div> 

W szczególności pola wyboru wyglądają naprawdę źle, jak pokazano poniżej

Czy ktoś miał jakieś podobne problemy, czy jestem po prostu robienie czegoś trochę głupiego?

wszelkie myśli wdzięcznością przyjął

Answer 1

Wygląda domyślnej wersji simple_form nie jest całkowicie pracy z Bootstrap 3. I dlatego musiał zmienić mój plik gem aby przeczytać:

gem 'simple_form', '~> 3.1.0.rc1', github: 'plataformatec/simple_form', branch: 'master' 

ten został rozwiązany raz reran inicjatora i ponownym uruchomieniu aplikacji.

Answer 2

masz rację co do wersji w Gemfile, również znalazłem, że formy świadczy lepiej o tej składni:

<%= simple_form_for @item, html: {class: 'form-horizontal'}, 
        wrapper: :horizontal_form, 
        wrapper_mappings: { 
          check_boxes: :horizontal_radio_and_checkboxes, 
          radio_buttons: :horizontal_radio_and_checkboxes, 
          file: :horizontal_file_input, 
          boolean: :horizontal_boolean 
        } do |f| %> 

    <%= f.input :sample_model_field%> 
    <div class="form-group"> 
     <div class="col-sm-offset-3 col-sm-9"> 
     <%= f.button :submit %> 
     </div> 
    </div> 
<% end %> 

Można również spojrzeć na przykładowy kod aplikacji:

https://github.com/rafaelfranca/simple_form-bootstrap