Question

我正在尝试使用bootstrap 4 alpha设置simple_form，我在使用自定义单选按钮时遇到问题。我想要的html输出看起来很简单，但我似乎无法正确配置。

目标输出：

<label class="col-xs-2 col-form-label">Label</label>
<div class="col-xs-10">
  <label class="custom-control custom-radio">
    <input id="radio1" name="radio" type="radio" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Toggle this custom radio</span>
  </label>
  <label class="custom-control custom-radio">
    <input id="radio2" name="radio" type="radio" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Or toggle this other custom radio</span>
  </label>
</div>

尝试配置：

  config.wrappers :horizontal_radio, tag: 'div', class: 'form-group row', error_class: 'has-error' do |b|
    b.use :html5
    b.optional :readonly

    b.use :label, class: 'col-xs-2 col-form-label'

    b.wrapper tag: 'div', class: 'col-xs-10' do |ba|
      ba.wrapper tag: 'label', class: 'custom-control custom-radio' do |bb|
        bb.use :input, class: 'custom-control-input'
        bb.wrapper tag: 'span', class: 'custom-control-indicator' do
        end
        bb.use :label_text, class: 'custom-control-description'
      end
    end
  end

当前输出：

<label class="col-xs-2 col-form-label radio_buttons optional">Label</label>
<div class="col-xs-10">
  <label class="custom-control custom-radio">
    <input type="hidden" name="store[payment_type]" value="">
    <span class="radio inline">
      <input class="custom-control-input radio_buttons optional" type="radio" value="true" name="store[payment_type]" id="store_payment_type_true">
      <label class="collection_radio_buttons" for="store_payment_type_true">Yes</label>
    </span>
    <span class="radio inline">
      <input class="custom-control-input radio_buttons optional" readonly="readonly" type="radio" value="false" name="store[payment_type]" id="store_payment_type_false">
      <label class="collection_radio_buttons" for="store_payment_type_false">No</label>
    </span>
    <span class="custom-control-indicator"></span>
    Payment type
  </label>
</div>

这并不太远，但它不对，目前无效。我似乎无法登陆正确的配置以获得正确的输出。我试图使用wrap_with但我需要在包装器中添加额外的元素，而包装器类似乎只是form_field包装器而不是item_wrapper。

如果有人能指出我正确的方向，那将非常有用。

simple_form bootstrap 4单选按钮

0 个答案: