Question

如何在包含表单的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 %>

谢谢你，珊

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

Answer 2

看起来您正在使用Bootstrap，因此我建议您调整视图代码以使用Bootstrap文档的此部分中描述的水平表单布局：http://getbootstrap.com/css/#forms

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

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

有两件事是必要的：

标签元素上的类
checkbox元素必须位于label元素之前。

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

Answer 5

我前几天有类似的问题，我使用twitter bootstrap，但我也使用了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;
}

Answer 6

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

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

Answer 7

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

Answer 8

用于基本的rails标签：

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

Answer 9

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

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

Answer 10

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

Answer 11

对于Bootstrap 4，在HAML中

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

或

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

https://v4-alpha.getbootstrap.com/components/forms/#default-stacked

:syn sync minlines=9999

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

Answer 12

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

Answer 13

在Rails 5.2，ruby 2.4和bootstrap 4.1.1上：

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

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

Answer 14

我使用纯css / html，这个css对我有用。

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

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

14 个答案: