简单表单添加填充并移动表单上的一些元素答案

【问题标题】：Simple form adds padding and shifts some elements on the form简单表单添加填充并移动表单上的一些元素
【发布时间】：2015-12-01 13:39:44
【问题描述】：

我正在使用 simple_form gem

simple_form 在我的输入之间添加不需要的填充，移动按钮并减少标签和输入之间的空间（检查屏幕截图）

我该如何解决？

问题说明：

这是表单的包装器：edit.html.erb

<div class="panel panel-primary" data-collapsed="0">
    <div class="panel-heading">
        <div class="panel-title">
            Editing: <%= @user.username %>
        </div>
    </div>

    <div class="panel-body">
      <%= render 'form' %>
    </div>
</div>

这是 _form.html.erb

  <%= simple_form_for @user,
   defaults: { input_html: { class: 'form-control ' } },
  html: {class:"form-horizontal form-groups-bordered"} do |f| %>

    <div class="form-group">
        <label for="field-1" class="col-sm-3 control-label">Name</label>

        <div class="col-sm-5">
            <%= f.input :name, placeholder: "", label: false %>
        </div>
    </div>

    <div class="form-group ">
        <label for="field-1" class="col-sm-3 control-label">Contact details</label>

        <div class="col-sm-5 ">
            <%= f.input :contact_details,
             placeholder: "",
             label: false %>
        </div>
    </div>

    <div class="form-group">
        <label for="field-ta" class="col-sm-3 control-label">Info</label>

        <div class="col-sm-5" >
          <%= f.input :user_info,
            as: :text,
            placeholder: "",
            input_html: { style:"overflow: hidden; word-wrap: break-word; resize: horizontal; height: 100px;"},
            label: false %>
        </div>
    </div>

    <div class="form-group">
      <div class="col-sm-offset-3 col-sm-5">
        <%= f.button :submit, "Save", class: "btn btn-primary" %>
        <%= link_to "Cancel", @user, class: "btn btn-default" %>
      </div>
    </div>
<% end %>

【问题讨论】：

请发布您完成的代码或提供演示。
@alirezasafian 截图解释了整个问题
虽然截图解释了问题，但我们仍然无法给出解决方案，因为您的代码结果取决于 simple-form 实际输出的内容。只需在此处粘贴整个 html 和 css 代码，我将能够为您提供帮助 :)

标签： html css ruby-on-rails simple-form

【解决方案1】：

我发现 simple_form 在输入周围添加了一个包装 div（屏幕截图）

^{不确定，但我上次使用它时，它没有添加任何包装器。}

所以，我使用f.input_field 而不是f.input，根据documentation 删除所有包装器div。

这是更新后的表单输入之一。

<%= f.input_field :current_build, class:"form-control", label: false %>

【讨论】：