Question

我正在尝试创建一个显示内联无线电选项的表单，如下所示：

Apple O Microsoft O Twitter O Square

目前我有这条线：

<%= f.association :company, as: :radio, label: false %>

但我的表格看起来像这样：

O Apple
O微软
O Twitter
O Square

我已尝试<div class="form-inline"></div>围绕该输入并添加

<%= f.association :company, as: :radio, label: false, :item_wrapper_class => 'inline' %>

我是否需要将输入更改为集合？

Answer 1

使用常规导轨可以做到

 <div class="radio">
    <label>
      <%= radio_button_tag "Product Type", "Retail Product or Service", true %>
      Retail Product or Service
    </label>
    <label>
      <%= radio_button_tag "Product Type", "Tax Code", false %>
      Tax Code
    </label>
    <label>
      <%= radio_button_tag "Product Type", "Discount Amount", false %>
      Discount Amount
    </label>
    <label>
      <%= radio_button_tag "Product Type", "Discount Percent", false %>
      Discount Percent
    </label>
  </div>

Answer 2

您可以使用：

<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

或者这个（仅限标签形式）：

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>

使用简单形式和twitter bootstrap的内联单选按钮

2 个答案: