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

我希望表单在上图中有一个$ infront，就像它有@一样。

提前感谢。\

<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

如果您为form_for或form_tag使用Bootstrap 3，请尝试以下操作：

<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等一些Bootstrap组件。

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

<强>步骤1：

如果在使用以下命令之前没有完成，请为simple_form生成Bootstrap配置文件 -

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

<强>步骤-3：修改您的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 %>

简单的表单引导设计

1 个答案: