Question

Simpleform是否支持Bootstrap3单选按钮？

我尝试使用下面的配置自定义包装器，但这似乎不能很好地工作。

config.wrappers :radio_buttons, tag: 'div', class: "form-group", error_class: "has-error" do |b|
    b.use :html5
    b.use :label, { class: "control-label col-lg-4" }
    b.wrapper :tag => 'div', class: "col-lg-8" do |ba|
      ba.wrapper :tag => 'div', class: 'checkbox' do |bb|
        bb.use :input, { class: 'uniform', label: false }
        bb.use :label_text { label: false }
      end
    end
    b.use :hint,  wrap_with: { tag: :p, class: "help-block" }
    b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" }
  end

此代码可以更改以支持以下内容？

<div class="col-lg-8">
                            <div class="checkbox">
                                <label>
                                    <div class="radio"><span class="checked"><input class="uniform" type="radio" name="optionsRadios" value="option1" checked=""></span></div>Checked
                                    radio
                                </label>
                            </div>
                            <!-- /.checkbox -->
                            <div class="checkbox">
                                <label>
                                    <div class="radio"><span><input class="uniform" type="radio" name="optionsRadios" value="option2"></span></div>Unchecked
                                    radio
                                </label>
                            </div>
                            <!-- /.checkbox -->
                            <div class="checkbox">
                                <label>
                                    <div class="radio disabled"><span class="checked"><input class="uniform" type="radio" name="optionsRadios2" value="option3" checked="" disabled=""></span></div>
                                    Disabled checked radio
                                </label>
                            </div>
                            <!-- /.checkbox -->
                            <div class="checkbox">
                                <label>
                                    <div class="radio disabled"><span><input class="uniform" type="radio" name="optionsRadios2" value="option4" disabled=""></span></div>
                                    Disabled unchecked radio
                                </label>
                            </div>
                            <!-- /.checkbox -->
                        </div>

Answer 1

所以我真的不认为你应该把一个广播类放在一个复选框类中。你为什么混合复选框和电台课程？如果您查看bootstrap css example，您会看到：

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>

但无论如何，这应该归结为css。你的application.css（或application.scss）文件是什么样的？您是否导入/要求引导程序作为您的默认CSS？此外，您的表单本身是什么样的？

Simpleform Bootstrap 3单选按钮

1 个答案: