簡體   English   中英

使引導程序適應simple_form

[英]Adapt bootstrap to simple_form

我想修改引導程序代碼

<div class="row">
                <div class="form-group col-lg-6">
                  <label>Nick</label>
                  <input type="text" class="form-control">
                </div>
                <div class="form-group col-lg-6">
                  <label>Email</label>
                  <input type="email" class="form-control">
                </div>
</div>

使用simple_form。

我嘗試了類似的東西

<%= simple_form_for User.new do |f| %>
  <%= f.input :nick, label: "Nick", class: 'form-group col-lg-6' %>
  <%= f.input :email, label: "Email", class: 'form-group col-lg-6'%>
<% end %>

但是沒有成功。 有人可以幫我解決嗎?

Simpleform需要一些配置才能與Bootstrap完美配合。

創建一個初始化器並配置simpleform以使用引導程序:

# File here config/initializers/simple_form_bootstrap.rb
SimpleForm.setup do |config|
  config.wrappers :vertical_input_group, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, class: 'control-label'

    b.wrapper tag: 'div' 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

  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
end

可以在這里找到更多信息: https : //github.com/plataformatec/simple_form/wiki/How-to-use-Bootstrap-3-input-group-in-Simple-Form

您不應該直接在視圖中說出User.new ,在其控制器中執行此操作,對於您的用戶控制器,請說類似@user = User.new

在你看來

<%= simple_form_for @user, html: { multipart: true } do |f| %>
  <%= f.input :nick, label: "Nick", class: 'form-group col-lg-6' %> #i presume :nick is your tables name,instead of saying :name.
  <%= f.input :email, label: "Email", class: 'form-group col-lg-6'%>
<% end %>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM