简单的表格 - 控制标签和输入的宽度（带引导）

Question

我正在使用Simple_form和Bootstrap。

我想使用水平包装，但我需要使标签更宽，输入更窄。我想用bootstrap 4 vs custom css做这个。

标签和输入应位于同一行（内联），右对齐。

col-md-8表示标签，col-md-4表示输入。我怎么做？

 <%= f.input :role, :wrapper =>:horizontal_range, input_wrapper_html: { class: "col-md-4"}, label_wrapper_html: {class: "col-md-8"} %>

编辑：我应该补充说，f.input：角色包含在一个

<div class='row'>
  <div class='col-md-6"> 
      f.input :role 
  </div>
</div>

第二，

我需要在输入结束时添加％。但是，它似乎不起作用。

 <%= f.input :pct_of_car , append: "%",  :wrapper =>:horizontal_range %>

但是，这似乎不起作用。我的语法有什么问题？

第三，如何修改垂直collection_inline有2或3列？

  # vertical input for inline radio buttons and check boxes
  config.wrappers :bs_vertical_collection_inline, item_wrapper_class: 'form-check form-check-inline', tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
    b.use :html5
    b.optional :readonly
    b.wrapper :legend_tag, tag: 'legend', class: 'col-form-label pt-0' do |ba|
      ba.use :label_text
    end
    b.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
  end

目前，所有复选框都是内联列出的，没有结构。我需要列出2或3列中的选项，以便更容易阅读。这也是一个很长的列表，因此可能需要将选项包装在滚动框中。

Answer 1

要为input和label设置类，请使用input_html和label_html：

<%= f.input :role, :wrapper => :horizontal_range, input_html: { class: "col-md-4"}, label_html: {class: "col-md-8"} %>

关于第二个问题 - 如果你没有使用提示，可能最简单的解决方案是这样做：

<%= f.input :pct_of_car , hint: "%",  :wrapper =>:horizontal_range %>

然后，您可以通过使用hint_html选项（类似于input_html和label_html）向提示添加自定义类来设置样式。

Update

添加自定义文本的更好解决方案是使用块作为输入：

<%= f.input(:role, :wrapper => :horizontal_range, label_html: {class: "col-md-8"}) do %>
  <div class='col-md-4'>
    <%= f.input(:role, components: [:input], :wrapper => false, label: false) %>
    <span>%</span>
  </div>
<% end %>

多亏了这个，你的标签有col-md-8类，你的文本输入用col-md-4类包装在一个div中。

Answer 2

您需要定义自己的自定义包装器或修改默认包装器。

First, ensure you have the default wrappers in your repository.

如果你找不到rails g simple_form:install --bootstrap，请运行app/initializers/simple_form_bootstrap.rb。

Second, locate the Bootstrap grid classes in this initializer. For a horizontal form, they are found in a block that looks like this:

config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :minlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, class: 'col-sm-3 control-label'

    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
      ba.use :input, class: 'form-control'
      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

Third, change the wrapper!

在此片段中，将col-sm-9更改为col-sm-8。也将col-sm-3改为col-sm-4。

Finishing up

保存。重新启动您的Rails服务器。现在所有表格都有33％宽度标签和66％宽度输入。

如果您不想全局应用它，请将wrapper: :my_wrapper选项传递给任何input并创建一个新的自定义包装器，它可以执行您希望它执行的操作。

一定要喜欢SimpleForm！