Simple_form类形式水平,引导程序3不在rails 4中工作

Question

我有两个rails应用程序,'form-horizo​​ntal'在一个工作,但不是另一个,我不知道为什么.

第一个应用程序称为"水平"(我的测试应用程序),另一个是"库存"

在"横向"应用程序中的表单:

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

并在浏览器中看起来像这样:

并且"库存"应用程序的表单是:

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

但它在浏览器中看起来像这样:

为什么表单水平类不能在"库存"应用程序中工作？

似乎整数输入字段是水平渲染的,但在文本输入字段中发生了一些奇怪的事情.以下是"Inventory"应用程序的浏览器源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="&#x2713;" /><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>

我已经在Chrome和Firefox中进行了测试.我已经检查过bootstrap-sass gem和simple_form gem是相同的版本.我没有花哨的自定义css或javascript,只是两个应用程序中文件中的@import 'bootstrap';行bootstrap_custom.css.scss.我不知道为什么文本输入字段覆盖了"库存"应用程序中屏幕的整个宽度,但是整数字段看起来很好并且水平渲染.这有什么不对？

Answer 1

我遇到了类似的问题,发现了一个非常快速的解决方法http://www.iconoclastlabs.com/blog/using-twitter-bootstrap-3-with-simple_form

简单的修复是(在执行正常的简单形式bootstrap init stuff之后 - 见下文),将以下代码添加到初始化程序(如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

而且你要参加比赛了.

"普通的简单形式bootstrap init stuff"类似于:

rails generate simple_form:install --bootstrap

如果您想要水平表单,请将其添加到simple_form配置中

config.form_class = "simple_form form-horizontal"

CAVEAT:基于最近的一些评论,看起来很多不适用于更新版本的simple_form.我前一段时间写过帖子,使用此代码的项目(对我来说)不再使用,simple_form因此很难找到确切的版本号.我相信这将适用于2.x.的测试.一旦你到达v3,你可能会遇到问题,必须找到不同的解决方案.