在 ruby on rails 中使用 Bootstrap 显示不正确的单选按钮答案

【问题标题】：Radio Buttons Displaying Incorrectly using Bootstrap in ruby on rails在 ruby on rails 中使用 Bootstrap 显示不正确的单选按钮
【发布时间】：2016-07-04 22:36:20
【问题描述】：

您好，我是一名新程序员，我正在尝试制作一个有点复杂的表单。我在rails 4上使用bootstrap 3和ruby。我有一个表格来制作一个有颜色的单元（一种产品）。您可以使用嵌套属性从模型颜色中选择此颜色。我只希望用户能够使用值为 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 %>

【问题讨论】：

标签： css ruby-on-rails forms twitter-bootstrap activerecord

【解决方案1】：

您可以尝试使用带有“radio-inline”类的标签标记包装每个 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 %>

【讨论】：

是的，我试过了，但我不确定如何使用 ruby on rails form helper 来实现它。你知道我应该怎么做吗？
谢谢，我刚刚尝试了您的解决方案，但它现在还在工作，请参阅编辑后的问题
您编辑的问题中有“radio_line”。它不应该是下划线，应该是连字符，'radio-inline'
修复了我的错误！对不起，多么愚蠢的错误！非常感谢您的帮助！

【解决方案2】：

您也可以尝试将:item_wrapper_class => 'inline' 添加到您的代码中。

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

【讨论】：