Question

我使用bootstrap v3.3.1和simple_form 3.1.0。

我以水平形式写了f.input :some_column, as: :radio_buttons, item_wrapper_class: 'radio-inline'。而simple_form 3.0.2生成label.radio-inline > input，但simple_form 3.1.0生成span.radio-inline > label > input。

似乎bootstrap的Inline checkboxes and radios假设没有span的标签。（http://getbootstrap.com/css/#forms-controls）如何删除span并将radio-inline类设置为内联标签？

我尝试item_wrapper_tag: false我可以删除span，但我无法将radio-inline类设置为内嵌标签。
我尝试了label_html: { class: 'radio-inline' }，并将类设置为左列标签而不是内联标签。

Answer 1

这是简单的单选按钮内嵌解决方案

<强> CSS

.radio-buttons-inline{
    .make-md-column(12);
}

.radio-buttons-inline {
    .margin-right(10px);
}

<强> HTML

 <div class="radio-buttons-inline">
    <label class="radio-inline">
         <input type="radio" name="inlineRadioOptions" value="option1">1
    </label>
    <label class="radio-inline">
         <input type="radio" name="inlineRadioOptions" value="option1">2
    </label>
    <label class="radio-inline">
         <input type="radio" name="inlineRadioOptions" value="option1">3
    </label>
 <hr>
</div>

http://jsfiddle.net/52VtD/9291/

Answer 2

我知道现在为时已晚，但对于那里寻找答案的人来说，发现这个帖子我觉得你可能正在寻找这样的东西：

f.input :some_column, as: :radio_buttons, item_wrapper_class: 'radio-inline', item_wrapper_tag: 'label'

如何使用label.radio-inline而不是span.radio-inline＆gt;带bootstrap 3和simple_form 3.1.0的标签？

2 个答案: