在轨道上的红宝石中使用Bootstrap显示不正确的单选按钮

Question

嗨，我是一个新的程序员，我正试图制作一个有点复杂的形式。我在轨道上使用bootstrap 3和ruby 4.我有一个用于制作具有颜色的单元（一种产品）的表格。您可以使用嵌套属性从模型Color中选择此颜色。我只希望用户能够使用0-9或n或s值的单选按钮选择颜色的色调。我希望所有这些单选按钮都在同一行，但我的样式有一些问题。我只能将它们全部垂直或全部水平但都重叠并且与radio_buttons后面的所有标签重叠。我不知道如何解决这个问题:(任何信息都会受到欢迎。 提前致谢。

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@unit) do |f| %>

    <%= f.label :quantity, "Cantidad:" %>
    <%= f.number_field :quantity, class: 'form-control' %>
    <hr>
...

  <div class="radio-inline">
    <%= f.fields_for :colors do |ff| %>
      <%= ff.label :hue, "Nombre de tu Marca:" %>
      <%= ff.radio_button :hue, '0' %> 0
      <%= ff.radio_button :hue, '1' %> 1
      <%= ff.radio_button :hue, '2' %> 2
      <%= ff.radio_button :hue, '3' %> 3
      <%= ff.radio_button :hue, '4' %> 4
      <%= ff.radio_button :hue, '5' %> 5
      <%= ff.radio_button :hue, '6' %> 6
      <%= ff.radio_button :hue, '7' %> 7
      <%= ff.radio_button :hue, '8' %> 8
      <%= ff.radio_button :hue, '9' %> 9
      <%= ff.radio_button :hue, 'n' %> n
      <%= ff.radio_button :hue, 's' %> s
    <% end %>
  </div>
....
 </div>
</div>

我也做了这个没有结果：

<%= f.fields_for :colors do |ff| %>
      <%= ff.label :hue, "Hue:" %>
      <div class='radio_inline'><%= ff.radio_button :hue, '0' %> 0</div>
      <div class='radio_inline'><%= ff.radio_button :hue, '1' %> 1</div>
      <div class='radio_inline'><%= ff.radio_button :hue, '2' %> 2</div>
      <div class='radio_inline'><%= ff.radio_button :hue, '3' %> 3</div>
      <div class='radio_inline'><%= ff.radio_button :hue, '4' %> 4</div>
      <div class='radio_inline'><%= ff.radio_button :hue, '5' %> 5</div>
      <div class='radio_inline'><%= ff.radio_button :hue, '6' %> 6</div>
      <div class='radio_inline'><%= ff.radio_button :hue, '7' %> 7</div>
      <div class='radio_inline'><%= ff.radio_button :hue, '8' %> 8</div>
      <div class='radio_inline'><%= ff.radio_button :hue, '9' %> 9</div>
      <div class='radio_inline'><%= ff.radio_button :hue, 'n' %> n</div>
      <div class='radio_inline'><%= ff.radio_button :hue, 's' %> s</div>
    <% end %>

Answer 1

您可以尝试使用带有＆＃39; radio-inline＆＃39;类的标签标记来包装每个radio_button，如此引导示例所示，来自documentation：

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1"   value="option1"> 1
</label>

在您的情况下，您不应该将整个嵌套表单包装在无线电内联div中。而是将每个单选按钮输入包装在无线电内联div中，如下所示：

<%= f.fields_for :colors do |ff| %>
  <%= ff.label :hue, "Nombre de tu Marca:" %>
  <div class="radio-inline">
    <%= ff.radio_button :hue, '0' %> 0
  </div>
  <div class="radio-inline">
    <%= ff.radio_button :hue, '1' %> 1
  </div>
  <div class="radio-inline">
    <%= ff.radio_button :hue, '2' %> 2
  </div>
<% end %>

Answer 2

您还可以尝试在代码中添加:item_wrapper_class => 'inline'。

例如，您的代码行看起来像<%= ff.radio_button, { :item_wrapper_class => 'inline' }, :hue, '6' %> 6