【问题标题】:Adapt bootstrap to simple_form使引导程序适应 simple_form
【发布时间】:2015-05-23 10:53:50
【问题描述】:

我想修改引导代码

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

但没有成功。有人可以帮我解决吗?

【问题讨论】:

    标签: ruby-on-rails twitter-bootstrap simple-form


    【解决方案1】:

    Simpleform 需要一些配置才能很好地与引导程序配合使用。

    创建一个初始化程序并配置 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

    【讨论】:

      【解决方案2】:

      你不应该直接在视图中说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 %>
      

      【讨论】:

      • 但是我没有在 User 中调用这个 simple_form
      • 你不必在User控制器中调用simple_form,在它的视图中就足够了。在你使用的控制器中调用@user = User.new的关系。
      • 和@user 在其视图中
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-06-04
      • 2015-07-22
      • 1970-01-01
      • 1970-01-01
      • 2021-12-29
      • 2022-10-20
      相关资源
      最近更新 更多