文件输入与其余输入不对齐答案

【问题标题】：file inputs not aligning with rest of inputs文件输入与其余输入不对齐
【发布时间】：2014-08-27 06:10:33
【问题描述】：

在我的水平表单中，我的所有输入元素都正确对齐，除了文件输入。

它们占据 100% 的宽度并浮动到左侧。

在我的 simple_form_bootstrap.rb 中，我的包装器似乎配置正确，标签为 3，输入为 9.. 但不知何故，在生成的 html 中，它没有被考虑在内。

包装器：

config.wrappers :horizontal_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, class: 'col-sm-3 control-label'

    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
      ba.use :input
      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

表格标题：

<%= simple_form_for(@post, html: { class: 'form-horizontal', role: "form", multipart: true },
        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.error_notification %>

我的表单中的表单输入

 <%= f.fields_for :assets do |builder| %>
    <%= builder.input :attachment, as: :file, :label => "Image:" %>
  <% end %>

生成的html

<div class="form-group file optional post_assets_attachment">
<label class="file optional control-label" for="post_assets_attributes_0_attachment">
Image:</label>
<input class="file optional form-control" id="post_assets_attributes_0_attachment" name="post[assets_attributes][0][attachment]" type="file">
</div>

simple_form 设置为什么不适用于文件输入？

【问题讨论】：

文件输入没有样式..浏览器样式它。 getbootstrap.com/css/#forms检查文件输入
是的，但我正在尝试设置包装器的样式而不是输入本身。对于文本字段等其他控件，simple_form 自动为标签添加 col-sm-x，为实际字段添加 col sm-x。这不适用于输入包装器。它只是添加了表单组

标签： css ruby-on-rails ruby-on-rails-4 twitter-bootstrap-3 simple-form

【解决方案1】：

在简单形式的 3.1.0.rc1 示例应用程序中找到了我的答案。

由于某种原因，在表单标题中指定包装器似乎不起作用。必须将其直接应用于输入。

我变了：

<%= builder.input :attachment, as: :file, :label => "Image:" %>

到

<%= builder.input :attachment, as: :file, :label => "Image:", wrapper: :horizontal_file_input  %>

它现在完美运行。

【讨论】：