Rails 4、Bootstrap 3、simple_form - 表单样式不起作用 [英] Rails 4, Bootstrap 3, simple_form - form styling not working
问题描述
过去我曾使用 rails 3.x bootstrap 2.x 和 simple_form 取得了巨大的成功.但是,我尝试创建一个新的(未升级的)Rails 4/Bootstrap 3 应用程序,虽然可以使用 simple_form 语法,甚至可以使用嵌套表单,但看起来样式不起作用.我在非基于模型的表单上使用了 rails-bootstrap-forms 并且样式看起来不错,但是,我更愿意将 simple_form 用于我的大多数表单.
我的文件如下所示
宝石
source 'https://rubygems.org'宝石导轨",4.1.6"宝石'mysql2'宝石'jquery-rails'宝石设计"gem 'sass-rails'gem '咖啡轨','~>4.1.0'gem 'bootstrap-sass', '~>3.2.0'gem 'autoprefixer-rails'gem 'therubyracer', '0.11.4', :platforms =>:红宝石gem 'uglifier', '>= 1.3.0'宝石'jquery-ui-rails'gem 'less-rails'gem 'font-awesome-rails'宝石'bootstrap_form'gem 'jbuilder', '~>2.0'gem 'sdoc', '~>0.4.0', 组: :doc宝石'jquery-turbolinks'宝石涡轮链接",1.3.0"#表单和用户输入宝石'simple_form'宝石茧"宝石国家选择"宝石ckeditor"宝石贡"
application.css.scss
/**= require_self*= 需要 rails_bootstrap_forms*= 需要字体很棒*= require_tree .*/@import "bootstrap-sprockets";@import "引导程序";
我有两个未更改的初始化程序 simple_form.rb 和 simple_form_bootstrap.rb
和如下所示的表单
<%= simple_form_for @item, :html =>{ :class =>'form-horizontal' } 做 |f|%><% if f.error_notification %><div class="alert 警报-错误淡入"><a class="close" data-dismiss="alert" href="#">×</a><%= f.error_notification %>
<%结束%><%= f.input :user_id, :as =>:隐藏, :input_html =>{:值=>@userid } %><%= f.association :category %><%= f.input :name %><%= f.input :description %><%= f.input :cool %><%= f.input :cold %><%= f.button :submit, :class =>'btn-主要'%><%= link_to t('.cancel', :default => t("helpers.links.cancel")),items_path, :class =>'btn btn-默认' %><%结束%>
以下列方式输出
<div class="control-group hidden item_user_id"><div class="controls"><input class="hidden" id="item_user_id" name="item[user_id]" type="隐藏"/></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">选项1</option><option value="3">选项2</option><option value="4">选项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="内衣"/></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>
特别是复选框看起来很糟糕,如下所示
有没有人遇到过类似的问题,或者我只是做了一些愚蠢的事情?
感激地接受任何想法
看起来 simple_form
的默认版本不能与 Bootstrap 3 完全兼容.因此,我不得不更改我的 gem 文件以阅读以下内容:
gem 'simple_form', '~>3.1.0.rc1',github:'plataformatec/simple_form',分支:'master'
一旦我重新运行初始化程序并重新启动应用程序,问题就解决了.
In the past I have used rails 3.x bootstrap 2.x and simple_form to great success. However, I have tried to created a new (not upgraded) Rails 4 / Bootstrap 3 app and although the simple_form syntax is able to be used and can even use nested forms, it looks as though the styling is not working. I have used rails-bootstrap-forms on a none model based form and that styling looks fine, however, I would prefer to use simple_form for the majority of my forms.
My files look like the following
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";
I have the two initializers that have not been altered simple_form.rb and simple_form_bootstrap.rb
and a form looking like the following
<%= 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="#">×</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 %>
which outputs in the following way
<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>
In particular the checkboxes look really bad as shown below
Has anyone had any similar issues, or am I just doing something a bit dumb?
any thoughts gratefully accepted
Looks like the default version of simple_form
is not completely working with Bootstrap 3. I therefore had to change my gem file to read the following:
gem 'simple_form', '~> 3.1.0.rc1', github: 'plataformatec/simple_form', branch: 'master'
This has resolved the issue once I reran the initializer and restarted the app.
这篇关于Rails 4、Bootstrap 3、simple_form - 表单样式不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!