Rails 4，Bootstrap 3，simple_form – 表单样式不起作用

在过去，我使用rails 3.x bootstrap 2.x和simple_form取得了巨大的成功。 但是，我尝试创建一个新的（未升级的）Rails 4 / Bootstrap 3应用程序，虽然simple_form语法能够使用，甚至可以使用嵌套表单，但看起来好像样式不起作用。 我在基于非模型的表单上使用了rails-bootstrap-forms，并且样式看起来很好，但是，我更喜欢在我的大多数表单中使用simple_form。

我的文件如下所示

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

我有两个没有被改变的初始化器simple_form.rb和simple_form_bootstrap.rb

和一个看起来像以下的表格

  { :class => 'form-horizontal' } do |f| %>  
 ×  
   :hidden, :input_html => { :value => @userid } %>       'btn-primary' %>  t("helpers.links.cancel")), items_path, :class => 'btn btn-default' %>  

以下列方式输出

  
 
Category
 Option 1 Option 2 Option 3 
Name
 
Description
 
Warm
 
Cool
 

特别是复选框看起来非常糟糕，如下所示

有没有人有任何类似的问题，或者我只是做一些有点愚蠢的事情？

任何想法都感激不尽

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%> 
 
 <%= f.button :submit %> 
 
 <% 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' 

一旦我重新启动初始化程序并重新启动应用程序，这就解决了这个问题。