如何在 Rails 表单中将复选框和标签保持在同一行？答案

【问题标题】：How to keep a checkbox and label on the same line in a Rails form?如何在 Rails 表单中将复选框和标签保持在同一行？
【发布时间】：2012-09-19 03:12:14
【问题描述】：

我应该怎么做才能将复选框的标签与包含表单的 rails 视图中的复选框保持在同一行？

目前标签在下一行：

<div class="span6 offset3">
<%= form_for(@user) do |f| %>
<%= render 'shared/error_messages', object: f.object %>

  <%= f.label :name %>
  <%= f.text_field :name %>

  <br>
  <%= f.check_box :terms_of_service %>
  <%= f.label :terms_of_service, "I agree to the #{link_to 'Terms of Service', policies_path}.".html_safe %>
  <br><br>

  <%= f.submit "Create my account", :class => "btn btn-large btn-primary" %>
<% end %>

谢谢你，亚历山德拉

【问题讨论】：

我找到了这个链接，我想你可以把它应用到你的代码中。 stackoverflow.com/questions/306252/…>
查看stackoverflow.com/a/12037003/517483

标签： ruby-on-rails forms twitter-bootstrap ruby-on-rails-3

【解决方案1】：

根据bootstrap wiki，一定是

<label class="checkbox">
  <input type="checkbox"> Check me out
</label>

在 Ruby on Rails 中是

<%= f.label :terms_of_service do %>
  <%= f.check_box :terms_of_service %>
  I agree to the <%= link_to 'Terms of Service', policies_path %>.
<% end %>

【讨论】：

这里有同样的问题。我按照这个将f.check_box 包裹在f.label 中，现在它已经对齐了。
谢谢！这是我从上面的答案中需要的，在评论中指出 Rails 不允许将输入包装在标签中
为其他读者。你想让标签在复选框之前，文本将出现在f.check_box之前

【解决方案2】：

看起来您正在使用 Bootstrap，因此我建议调整您的视图代码以使用 Bootstrap 文档的本节中描述的水平表单布局：https://getbootstrap.com/docs/4.3/components/forms/#horizontal-form

【讨论】：

按照 David Underwood 的建议，我最终使用了 Bootstrap 文档。将:class => "checkbox inline" 添加到标签后，标签与复选框保持在同一行。
这条评论应该是一个单独的答案。它比公认的答案更好。
是的，这条评论是在 Rails 中实现的方式。引导解决方案假定您可以在输入周围包裹标签标签，而 rails 不会这样做。这里的最高评论有效
这里的每个答案都是错误的。正确的代码是<label class="checkbox"> <input type="checkbox"> Check me out </label>
如果有人使用 simple_form 来尝试完成此操作：<%= f.input :terms_of_service, inline_label: "I agree ...", label: false %> 生成：<label class="checkbox"><input type="checkbox"/>I agree ...</label>

【解决方案3】：

 <br>
  <%= f.check_box :terms_of_service, :style => "float:left;" %>
  <%= f.label :terms_of_service, "I agree to the #{link_to 'Terms of Service', policies_path}.".html_safe, :style => "float:left;" %>
  <br>

【讨论】：

= f.input :income, :label => "Income?", :input_html => {:style => "float:left"}

【解决方案4】：

对答案的评论是正确的，但它假定对元素顺序的理解存在一些细微差别。

正确答案如下：

<%= f.check_box :terms_of_service %>
<%= f.label :terms_of_service, "I agree to the #{link_to 'Terms of Service', policies_path}.".html_safe
                             , {class: "checkbox inline"} %>

有两件事是必要的：

标签元素上的类
复选框元素必须在标签元素之前。

一旦你看到它工作就很明显了，但是 form_for 的所有其他示例总是在标签之后有输入，你需要将其更改为复选框。

【讨论】：

【解决方案5】：

  <div class="form-inline">
    <%= f.check_box :subscribed, class: 'form-control' %>
    <%= f.label :subscribed, "Subscribe" %>
  </div>

【讨论】：

欢迎来到 StackOverflow！请在提供答案时尝试添加一两句话。最好的问候

【解决方案6】：

前几天我遇到了类似的问题，我使用的是 twitter bootsrap，但我也使用了 simple_form gem。我必须通过 css 修复这个细节，这是我的代码：

<%=f.input :status, :label => "Disponible?",  :as => :boolean, :label_html => { :class => "pull-left dispo" }%>

css:

.dispo{
    margin-right:10%;
}
pull-left{
    float:left;
}

【讨论】：

【解决方案7】：

要保持i18n使用label，可以使用t：

<%= f.label :my_field do %>
  <%= f.check_box :my_field %> <%= t 'activerecord.attributes.my_model.my_field' %>
<% end %>

【讨论】：

【解决方案8】：

我会将复选框包裹在标签内。

  <%= f.label :terms_of_service do %>
    <%= f.check_box :terms_of_service %>
    I agree to the <%= link_to 'Terms of Service', policies_path %>
  <% end %>

当输入字段被它的标签包裹时，你实际上不需要标签上的 for 属性。标签将在单击时激活复选框而不激活它。所以更简单：

  <label>
    <%= f.check_box :terms_of_service %>
    I agree to the <%= link_to 'Terms of Service', policies_path %>
  </label>

通常对于 Rails，这可能是一种解决方法（human_attribute_name 与 i18n 一起使用）：

<label>
  <%= f.check_box :terms_of_service %>
  <%= User.human_attribute_name(:terms_of_service) %>
</label>

【讨论】：

【解决方案9】：

对于基本的rails标签：

<%= label_tag('retry-all') do %>
  Retry All
  <= check_box_tag("retry-all",false) %>
<% end %>

【讨论】：

【解决方案10】：

你使用bootstrap吗？简单的方法是在 f.submit 中添加:class => "span1"。我确定它成功了！

【讨论】：

【解决方案11】：

<div class="row"> 
  <div class="col-sm-1">
    <%= f.label :paid? %>
  </div>
  <div class="col-sm-1">
    <%= f.check_box :paid, value: 'false'  %>
  </div>
</div>

【讨论】：

您需要在回答中添加评论或说明

【解决方案12】：

对于 Bootstrap 4，在 HAML 中

  .form-check
    =f.label :decision_maker, class: 'form-check-label' do
      =f.check_box :decision_maker, class: 'form-check-input'
      Decision Maker

或

  .form-group
    =f.check_box :decision_maker
    =f.label :decision_maker

https://getbootstrap.com/docs/4.3/components/forms/#default-stacked

<div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" value=""> Option one is this and that—be sure to include why it's great </label> </div>

第一种方式更正确，但第二种方式看起来几乎相同并且更干燥。

【讨论】：

【解决方案13】：

在 Rails 5.2、ruby 2.4 和引导程序 4.1.1 上：

<%= form.check_box :terms_of_service, label: "your custom label...."%>

为我工作而无需指示内联复选框。

【讨论】：

【解决方案14】：

我使用纯 css/html，这个 css 很适合我。

 input {
    float:left;
    width:auto;
}
label{
    display:inline;
}

【讨论】：