twitter-bootstrap 带有引导程序 3 的 Simple_form 类表单水平无法在 Rails 4 中工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21811407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple_form class form-horizontal with bootstrap 3 not working in rails 4
提问by andrewcockerham
I have two rails apps, and the 'form-horizontal' is working in one, but not the other, and I have no idea why.
我有两个 rails 应用程序，“表单水平”在一个应用程序中运行，但在另一个中不起作用，我不知道为什么。
First app is called "Horizontal" (my test app) and the other is "Inventory"
第一个应用程序被称为“水平”（我的测试应用程序），另一个是“库存”
Form in "horizontal" app:
在“水平”应用程序中形成：
<%= simple_form_for(@part, html: {class: 'form-horizontal' }) do |f| %>
<div class="field">
<%= f.input :name %>
</div>
<div class="field">
<%= f.input :number %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
and looks like this in the browser:
在浏览器中看起来像这样：
and the form for the "inventory" app is:
“库存”应用程序的表单是：
<%= simple_form_for(@item, html: {class: 'form-horizontal' }) do |f| %>
<%= f.error_notification %>
<div class="field">
<%= f.input :part_number %>
</div>
<div class="field">
<%= f.input :on_order_qty %>
<%= f.input :revision %>
<%= f.input :current_rev %>
<%= f.input :name, required: false%><br>
</div>
<%= f.simple_fields_for :parts do |part| %>
<%= render 'part_fields', :f => part %>
<% end %>
<div class="links">
<%= link_to_add_association 'Add additional supplier', f, :parts %><br><br>
</div>
<div class="fields">
<%= f.input :stock_qty %>
<%= f.input :ncmr_qty %>
</div>
<div class="form-actions">
<%= f.submit %>
</div>
<% end %>
but it looks like this in the browser:
但在浏览器中看起来是这样的：
Why won't the form-horizontal class work in the "Inventory" app?
为什么“库存”应用程序中的表单水平类不起作用？
It appears that the integer input fields are getting rendered horizontally, but something weird is happening in the text input fields. Here is the source html from the browser for the "Inventory" app:
整数输入字段似乎是水平呈现的，但文本输入字段中发生了一些奇怪的事情。这是来自浏览器的“库存”应用程序的源 html：
<form accept-charset="UTF-8" action="/items" class="simple_form form-horizontal"
id="new_item" method="post"><div style="margin:0;padding:0;display:inline"><input
name="utf8" type="hidden" value="✓" /><input name="authenticity_token"
type="hidden" value="H3DKGhGdtfv1e8F1rg9TgDJUyaBspXOSFMpm2gnjwzk=" /></div>
<div class="field">
<div class="input string required item_part_number"><label class="string required"
for="item_part_number"><abbr title="required">*</abbr> Part number</label><input aria
required="true" class="string required" id="item_part_number" maxlength="255"
name="item[part_number]" required="required" size="255" type="text" /></div>
</div>
<div class="field">
<div class="input integer optional item_on_order_qty"><label class="integer optional"
for="item_on_order_qty">On order qty</label><input class="numeric integer optional"
id="item_on_order_qty" name="item[on_order_qty]" step="1" type="number" /></div>
<div class="input string optional item_revision"><label class="string optional"
for="item_revision">Revision</label><input class="string optional" id="item_revision"
maxlength="255" name="item[revision]" size="255" type="text" /></div>
<div class="input boolean optional item_current_rev"><input name="item[current_rev]"
type="hidden" value="0" /><input class="boolean optional" id="item_current_rev"
name="item[current_rev]" type="checkbox" value="1" /><label class="boolean optional"
for="item_current_rev">Current rev</label></div>
<div class="input string optional item_name"><label class="string optional"
for="item_name">Name</label><input class="string optional" id="item_name" maxlength="255"
name="item[name]" size="255" type="text" /></div><br>
</div>
( I took out the html for the nested fields and some other fields for brevity)
<div class="form-actions">
<input name="commit" type="submit" value="Create Item" />
</div>
</form>
I've tested in both Chrome and Firefox. I've checked that the bootstrap-sass gem and simple_form gem are the same versions. I have no fancy customization css or javascript, just the @import 'bootstrap';line in a bootstrap_custom.css.scssfile in both apps. I don't know why the text input fields cover the whole width of the screen in the "Inventory" app, but the integer fields seem to be fine and rendering horizontally. What's wrong here?
我已经在 Chrome 和 Firefox 中进行了测试。我已经检查过 bootstrap-sass gem 和 simple_form gem 是相同的版本。我没有花哨的自定义 css 或 javascript，只是两个应用程序中文件中的@import 'bootstrap';行bootstrap_custom.css.scss。我不知道为什么文本输入字段覆盖了“库存”应用程序中的整个屏幕宽度，但整数字段似乎很好并且水平呈现。这里有什么问题？
采纳答案by mr rogers
I ran into a similar issue and found a pretty quick fix here http://www.iconoclastlabs.com/blog/using-twitter-bootstrap-3-with-simple_form
我遇到了类似的问题，并在这里找到了一个非常快速的解决方法http://www.iconoclastlabs.com/blog/using-twitter-bootstrap-3-with-simple_form
The simple fix is (after doing the normal simple form bootstrap init stuff -see below), you add the following code to an initializer (like config/initializers/simple_form_bootstrap.rb)
简单的修复是（在执行正常的简单表单引导程序初始化之后 - 见下文），将以下代码添加到初始化程序（如 config/initializers/simple_form_bootstrap.rb）
inputs = %w[
CollectionSelectInput
DateTimeInput
FileInput
GroupedCollectionSelectInput
NumericInput
PasswordInput
RangeInput
StringInput
TextInput
]
inputs.each do |input_type|
superclass = "SimpleForm::Inputs::#{input_type}".constantize
new_class = Class.new(superclass) do
def input_html_classes
super.push('form-control')
end
end
Object.const_set(input_type, new_class)
end
and you are off to the races.
然后你就要去比赛了。
The "normal simple form bootstrap init stuff" goes something like:
“正常的简单形式引导程序初始化内容”类似于：
rails generate simple_form:install --bootstrap
If you want horizontal forms, add this to your simple_form config
如果您想要水平表格，请将其添加到您的 simple_form 配置中
config.form_class = "simple_form form-horizontal"
CAVEAT: Based on some recent comments, it appears this many not work for more recent versions of simple_form. I wrote the post some time ago and the project that was using this code (for me) is no longer using simple_formso it's hard to track down the exact version number. I believe this will work for verisions 2.x. Once you get to v3 you may have issues and have to find a different solution.
警告：根据最近的一些评论，这些似乎不适用于更新版本的simple_form. 我前段时间写了这篇文章，使用此代码的项目（对我而言）不再使用，simple_form因此很难找到确切的版本号。我相信这适用于 2.x 版。进入 v3 后，您可能会遇到问题，必须找到不同的解决方案。
回答by Ninz
Simple Form 3.1.0.rc1 has been released!! This supports bootstrap 3. Just update your gem to the latest version this will solve your problem. You can check the other enhancements through the change logs here https://github.com/plataformatec/simple_form/blob/v3.1.0.rc1/CHANGELOG.md
Simple Form 3.1.0.rc1 已经发布！！这支持引导程序 3。只需将您的 gem 更新到最新版本即可解决您的问题。您可以通过此处的更改日志查看其他增强功能https://github.com/plataformatec/simple_form/blob/v3.1.0.rc1/CHANGELOG.md
回答by itsnikolay
Just update your simple_formto
只需更新您simple_form的
gem 'simple_form', '3.1.0.rc2'
And then re-run
然后重新运行
$ rails generate simple_form:install --bootstrap
回答by bir_ham
I tried quite many different solutions but, nothing helped until I've added wrapper: :horizontal_formline to each form inputs. And, I have the latest simple_form version: 3.2.1
我尝试了很多不同的解决方案，但是在我wrapper: :horizontal_form为每个表单输入添加行之前，没有任何帮助。而且，我有最新的 simple_form 版本：3.2.1
For example:
例如：
= f.input :payment_term, wrapper: :horizontal_form
= f.input :payment_term, wrapper: :horizontal_form
回答by andreofthecape
To override on per form basis, change:
要基于每个表单覆盖，请更改：
<%= simple_form_for(@item, html: {class: 'form-horizontal' }) do |f| %>
<%= simple_form_for(@item, html: {class: 'form-horizontal' }) do |f| %>
to
到
<%= simple_form_for(@item, wrapper: :horizontal_form) do |f| %>
<%= simple_form_for(@item, wrapper: :horizontal_form) do |f| %>
to change all forms to horizontal, change initializer:
要将所有形式更改为水平，请更改初始值设定项：
config/initializers/simple_form_bootstrap.rbline:
config/initializers/simple_form_bootstrap.rb线：
config.default_wrapper = :vertical_form
config.default_wrapper = :vertical_form
to
到
config.default_wrapper = :horizontal_form
config.default_wrapper = :horizontal_form
(remember to restart rails server after changing initializer)
（记得更改初始化器后重新启动rails服务器）
to change just an individual input, change:
要仅更改单个输入，请更改：
<%= f.input :on_order_qty %>
<%= f.input :on_order_qty %>
to
到
<%= f.input :on_order_qty, wrapper: :horizontal_form %>
<%= f.input :on_order_qty, wrapper: :horizontal_form %>
回答by Bayless
I had an issue with the full length of the input field spanning my entire page. Here is what I did and I hope it helps someone else.
Using simple_form 3.4.0
我遇到了跨越整个页面的输入字段的全长问题。这是我所做的，我希望它可以帮助其他人。
使用 simple_form 3.4.0
Open config/initializers/simple_form_bootstrap.rb At the bottom of the page I changed the following: From
打开 config/initializers/simple_form_bootstrap.rb 在页面底部我更改了以下内容：
config.default_wrapper = :vertical_form
config.wrapper_mappings = {
check_boxes: :vertical_radio_and_checkboxes,
radio_buttons: :vertical_radio_and_checkboxes,
file: :vertical_file_input,
boolean: :vertical_boolean,
datetime: :multi_select,
date: :multi_select,
time: :multi_select
}
end
To:
到：
config.default_wrapper = :horizontal_form
config.wrapper_mappings = {
check_boxes: :horizontal_radio_and_checkboxes,
radio_buttons: :horizontal_radio_and_checkboxes,
file: :horizontal_file_input,
boolean: :horizontal_boolean,
datetime: :multi_select,
date: :multi_select,
time: :multi_select
}
end
Then restart your app to reinitialize.
然后重新启动您的应用程序以重新初始化。
回答by Ankush Ganatra
If all the above doesn't work try gem
如果以上所有方法都不起作用，请尝试 gem
gem 'simple_form_bootstrap3'
宝石'simple_form_bootstrap3'
Need to replace form_for with horizontal_form_for
需要用 horizontal_form_for 替换 form_for
回答by Abram
Please check out the very helpful sample app here for usage of Simple Form and the Bootstrap toolkit on a Rails 4 application.:
请在此处查看非常有用的示例应用程序，了解在 Rails 4 应用程序上使用 Simple Form 和 Bootstrap 工具包。：
http://simple-form-bootstrap.plataformatec.com.br/
http://simple-form-bootstrap.plataformatec.com.br/
Don't forget the docs page.
不要忘记文档页面。
回答by wojtekk
Use simple form RC1. There is an entire example project: https://github.com/rafaelfranca/simple_form-bootstrap. I've just copied bootstrap initializer and followed horirozontal view example at https://github.com/rafaelfranca/simple_form-bootstrap/tree/master/app/views/examples.
使用简单形式 RC1。有一个完整的示例项目：https: //github.com/rafaelfranca/simple_form-bootstrap。我刚刚复制了引导初始化程序并遵循了https://github.com/rafaelfranca/simple_form-bootstrap/tree/master/app/views/examples 上的水平视图示例。
回答by coding addicted
When i use form-horizontal in my code, i also modify the different inputs with the bootstrap classes. For exemple with bootstrap 3:
当我在代码中使用 form-horizontal 时，我还使用引导程序类修改了不同的输入。以引导程序 3 为例：
<div class="form-group">
<%= f.label :name, class: "control-label col-sm-3" %>
<div class="col-sm-4"><%= f.text_field :name, placeholder: "Your placeholder", class: "form-control" %></div>
</div>
And now you can adjust the col-sm to col-sm-12 if you want the entire width of your app. I think it's easier to customize this way. ( col-sm are for bootstrap 3, if you need older version i think you have to use the old span- notation)
现在，如果您想要应用程序的整个宽度，您可以将 col-sm 调整为 col-sm-12。我认为以这种方式自定义更容易。（ col-sm 用于引导程序 3，如果您需要旧版本，我认为您必须使用旧的跨度符号）
More info for bootsrap form here: doc
此处有关 bootsrap 表单的更多信息：doc
Here is an exemple of code with bootstrap 2 and simple form: doc
这是带有引导程序 2 和简单形式的代码示例：doc
The output form with bootsrap 2 should look like this:
带有 bootsrap 2 的输出表单应如下所示：
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputName">Name</label>
<div class="controls">
<input type="text" id="Name" placeholder="Name">
</div>
</div>
</form>
I think you need to set a control-group class div and a controls class div.
我认为您需要设置一个控制组类 div 和一个控件类 div。
Here is the doc form the old syntax: doc
这是旧语法的文档形式：doc
Hope it helps
希望能帮助到你
