带复选框的简单形式内联输入

Question

我的表单目前有一个包含以下字段的表单：

简单的表单代码非常简单（使用horizo​​ntal_form类）：

<%= f.input :taxes %>

然而，在输入数据时，大多数时候人们都知道他们的年税，但很少每月都知道。所以我需要某种不同的用户体验，而不是让他们分开并永远记住，这就是我想出来的。

我不确定如何使用simple_form实现此HTML，但是上面的屏幕是通过此HTML呈现的：

<div class="form-group row decimal optional calculator_taxes"><label class="col-sm-3 col-form-label control-label decimal optional" for="calculator_taxes">Taxes</label><div class="col-sm-5"><input class="form-control numeric decimal optional" type="number" step="any" value="0.0" name="calculator[taxes]" id="calculator_taxes"></div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="Yearly">Yearly</label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">Monthly</label>
</div></div>

如何使用简单的表单将这两个带有广播<div class="form-check form-check-inline">的div添加到现有输入HTML中？

Answer 1

我相信您一直在询问如何将所有这些元素排成一条直线，在这种情况下，您只需将display: inline-block;用于包含所有这些元素的父div。或者您可以使用flexbox在div中垂直和水平对齐它们