简单的表单引导设计

Question

我如何制作简单的表格以使用

我当前的简单移动表单如下所示

<%= f.input :c_regular, :label => "Regular"%>
 <%= f.input :c_medium, :label => "Medium"%>
 <%= f.input :c_premium, :label => "Premium"%>
 <%= f.input :c_diesel, :label => "Diesel"%>
 <%= f.input :c_delivery, :label => "Delivery Charges"%>

我希望表单前面有一个 $，就像上图中的 @ 一样。

提前致谢。\

<div class="row">
        <%= simple_form_for @contact, url: supplier_contacts_path do |f| %>
        <%= f.input :first_name, label: "First Name" %>
        <%= f.input :last_name, label: "Last Name"%>
        <%= f.input :business_name, label: "Business Name" %>
        <%= f.input :phone_number, label: "Phone Number" %>
        <%= f.input :cell_number, label: "Mobile Number" %>
        <%= f.input :carrier, :label => "Mobile Carrier", :collection => mobile_carrier, :selected => "Tmobile"%>
        <%= f.input :street_address, label: "Street Address" %>
        <%= f.input :apt_suite, label: "Apt/Suite" %>
        <%= f.input :city, label: "City" %>
        <%= f.input :state, :label => "State", :collection => us_states, :selected => "New Jersey"%>
        <%= f.input :zip_code, :label => "Zip Code"%>
        <div class="input-group">
          <span class="input-group-addon">$</span>
          <%= f.input :c_regular, :label => "Regular", class:  "form-control" %>
        </div>
        <%= f.input :c_medium, :label => "Medium"%>
        <%= f.input :c_premium, :label => "Premium"%>
        <%= f.input :c_diesel, :label => "Diesel"%>
        <%= f.input :c_delivery, :label => "Delivery Charges"%>
        <%= f.button :submit, "Add Retailer", class: "btn btn-primary block full-width m-b"%>
        <%end%>
      </div>

Answer 1

如果您将 Bootstrap 3 用于您的 form_for 或 form_tag，请尝试以下操作：

<div class="input-group">
  <span class="input-group-addon">$</span>
 <%= f.input :c_regular, :label => "Regular", class:  "form-control" %>
</div>

---

但是如果您使用的是simple_form_for，那么some issues 会带有一些引导组件，例如input_group。

但幸运的是，也有一些解决方法。

第 1 步：

如果您在使用以下命令之前尚未完成，请为 simple_form 生成引导配置文件-

rails generate simple_form:install --bootstrap

这将在您的应用程序根目录的以下路径中创建一个配置文件 -

config/initializers/simple_form_bootstrap.rb

第 2 步：

在您的simple_form_bootstrap.rb 文件中包含以下附加包装器-

  config.wrappers :horizontal_input_group, 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.wrapper tag: 'div', class: 'input-group col-sm-12' do |append|
        append.use :input, class: 'form-control'
      end
      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如下：

<%= simple_form_for(@contact, url: supplier_contacts_path, html: { class: 'form-horizontal' }) do |f| %>
   <div class="form-inputs">
    <%= f.input :c_regular,wrapper: :horizontal_input_group do %>
     <span class="input-group-addon">$</span>
     <%= f.input_field :c_regular, :label => "Regular",class: "form-control" %>
    <% end %>
  </div>
<% end %>