使用简单形式和引导程序附加和前置答案

【问题标题】：append and prepend with simple-form and bootstrap使用简单形式和引导程序附加和前置
【发布时间】：2013-03-08 20:27:09
【问题描述】：

我需要能够使用引导程序追加和前置来使用简单的表单输入标记。我可以很容易地做到这一点，但不能让他们都工作。这可能吗。

这是我使用 haml 的，这是一个前置，但我最后需要另一个，所以使用 append。

= f.input :domain, wrapper: :prepend, label: false do
  %span.add-on
    %span.icon @
  = f.input_field :domain

【问题讨论】：

标签： ruby-on-rails-3 haml simple-form

【解决方案1】：

simple_form 仅具有 :prepend 或 :append 的包装器，但不能同时具有两者。幸运的是，构建一个兼具两者的自定义包装器真的很容易。只需复制并粘贴其中一个包装器并稍作修改即可。

这是我的解决方案：

config/initializers/simple_form.rb

config.wrappers :prepend_append, :tag => 'div', :class => "control-group", :error_class => 'error' do |b|
  b.use :html5
  b.use :placeholder
  b.use :label
  b.wrapper :tag => 'div', :class => 'controls' do |input|
    input.wrapper :tag => 'div', :class => 'input-prepend input-append' do |pa|
      pa.use :input
    end
    input.use :hint,  :wrap_with => { :tag => 'span', :class => 'help-block' }
    input.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
  end
end

而且，在您看来：

= f.input :url, wrapper: :prepend_append, label: false do
  %span.add-on something
  = f.input_field :url, input_html: { class: "span2" }
  %span.add-on something

最后，将其添加到您的 css 中：

.input-prepend .add-on,
.input-append input {
  float: left;
}

希望对您有所帮助。请务必重新启动服务器。

【讨论】：

【解决方案2】：

最简单的方法是：

<%= f.input :field, :wrapper_html => {class: "input-prepend input-append"} do %>
  <span class="add-on">$</span>
    <%= f.input_field :field %>
  <span class="add-on">%</span>
<% end %>

【讨论】：