Rails 4，Bootstrap 3，simple_form - 表單樣式不起作用

Question

在過去，我使用rails 3.x bootstrap 2.x和simple_form取得了巨大的成功。 但是，我嘗試創建一個新的（未升級的）Rails 4 / Bootstrap 3應用程序，雖然simple_form語法能夠使用，甚至可以使用嵌套表單，但看起來好像樣式不起作用。 我在基於非模型的表單上使用了rails-bootstrap-forms，並且樣式看起來很好，但是，我更喜歡在我的大多數表單中使用simple_form。

我的文件如下所示

寶石

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

我有兩個沒有被改變的初始化器simple_form.rb和simple_form_bootstrap.rb

和表格如下所示

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

以下列方式輸出

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

特別是復選框看起來非常糟糕，如下所示

有沒有人有任何類似的問題，或者我只是做一些有點愚蠢的事情？

任何想法都感激不盡

Answer 1

你對Gemfile中的版本是正確的，我也發現使用這種語法表單更好：

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

您還可以查看示例應用代碼：

https://github.com/rafaelfranca/simple_form-b​​ootstrap

Answer 2

看起來simple_form的默認版本不能與Bootstrap 3完全兼容。 因此，我不得不更改我的gem文件以閱讀以下內容：

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

一旦我重新啟動初始化程序並重新啟動應用程序，這就解決了這個問題。