Ruby-on-rails 如何在 Rails 表单中将复选框和标签保持在同一行？

How to keep a checkbox and label on the same line in a Rails form?

提问by AndraD

What should I do to keep the label of a checkbox on the same line with the checkbox in a rails view containing a form?

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

Currently the label goes on the next line:

目前标签在下一行：

<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 %>

Thank you, Alexandra

谢谢你，亚历山德拉

采纳答案by David Underwood

It looks like you're using Bootstrap, so I recommend adapting your view code to use the horizontal form layout described in this section of the Bootstrap docs: https://getbootstrap.com/docs/4.3/components/forms/#horizontal-form

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

回答by Beno?t Legat

According to the bootstrap wiki, it must be

根据bootstrap wiki，它必须是

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

which in Ruby on Rails is

在 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 %>

回答by jainvikram444

 <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>

回答by Patrck

The comment on the answer is correct, but it assumes some nuance of understanding about order of elements.

对答案的评论是正确的，但它假设对元素顺序有一些细微的理解。

The correct answer is as follows:

正确答案如下：

<%= 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"} %>

Two things are necessary:

有两件事是必要的：

1. The class on the label element
2. The checkbox element has to be before the label element.

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

This is obvious once you see it working, but all the other samples for form_for always have the inputs after the labels and you need to change that up for checkbox.

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

回答by Sidhannowe

To keep the i18n using of label, you can use t:

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

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

回答by Still Learning

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

回答by Rodrigo Zurek

i had a similar problem the other day, im using twitter bootsrap, but im also using the simple_form gem. i had to fix that detail through css, here is my code:

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

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

css:

css：

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

回答by Blair Anderson

for basic rails tags:

对于基本的 rails 标签：

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

回答by JSpang

I would wrap the check box inside the label.

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

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

When the input field is wrapped by it's label, you actually don't need the for attribute on the label. The label will activate the check box without it on click. So even simpler:

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

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

Generically for Rails, this could be a way to go about it (human_attribute_name works with i18n):

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

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

回答by Chloe

For Bootstrap 4, in HAML

对于 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

or

或者

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

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

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&mdash;be sure to include why it's great </label> </div>

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

The first way is the more correct way, but the second way looks virtually identical and DRYer.

第一种方式是更正确的方式，但第二种方式看起来几乎相同且 DRYer。