html - 自定义 simple_form 包装器以匹配 Bootstrap 4 复选框

Question

我正在尝试创建一个 simple_form 包装器来匹配 Bootstrap 4 的堆叠复选框/单选按钮。

这是我想要复制的 HTML 结构，由 Boostrap's docs 提供:

<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="form-check disabled">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

这是我的 simple_form 包装器当前所在的位置:

config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
  b.use :html5
  b.optional :readonly
  b.use :label
  b.use :input, class: "form-check-input"
  b.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
  b.use :hint,  wrap_with: { tag: 'small', class: 'form-text text-muted' }
end

这是当前输出的 HTML 结构:

<span class="checkbox">
  <label for="">
    <input class="form-check-input check_boxes optional" type="checkbox" value="" name="" id="">
    Text for checkbox goes here
  </label>
</span>

Answer 1

更新 05/2018

SimpleForm 发布了新版本 ships a Bootstrap 4.1 generator 。确保安装了 4.0.0+ 版本:

gem 'simple_form', '~> 4.0.0'

然后您可以使用以下命令生成新的初始化程序文件:

rails g simple_form:install --bootstrap

请确保使用 Bootstrap 4.1，但存在一些细微的差异。

上一个答案

深入挖掘 source code 后，我找到了需要传递给包装器配置的相关选项 item_wrapper_class 和 item_wrapper_label:

 config.wrappers(:vertical_radio_and_checkboxes, tag: 'div', 
    class: 'form-group', 
    error_class: 'has-error',
    item_wrapper_class: 'form-check', 
    item_label_class: 'form-check-label') do |b|
   b.use :html5
   b.optional :readonly
   b.use :label, class: 'form-control-label'
   b.use :input, class: 'form-check-input'
   b.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
   b.use :hint,  wrap_with: { tag: 'small', class: 'form-text text-muted' }
end