ruby-on-rails - 简单表单 - 控制标签和输入的宽度(带 Bootstrap )

Question

我正在使用 Simple_form 和 Bootstrap。

我想使用水平包装器，但我需要使标签更宽，输入更窄。我想使用 bootstrap 4 与自定义 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 :role 包含在

<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

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

首先，确保您的存储库中有默认包装器。

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

其次，在此初始值设定项中找到 Bootstrap 网格类。对于水平形式，它们位于如下所示的 block 中:

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

第三，更改包装器!

在此代码段中，将 col-sm-9 更改为 col-sm-8。同时将 col-sm-3 更改为 col-sm-4。

完成

保存。重新启动 Rails 服务器。现在，所有表单都将具有 33% 宽度的标签和 66% 宽度的输入。

如果您不想全局应用此功能，请将 wrapper: :my_wrapper 选项传递给任何 input 并创建一个新的自定义包装器来执行您想要的操作喜欢这样做。

一定喜欢 SimpleForm!