48

我应该怎么做才能将复选框的标签与包含表单的 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 %>

谢谢你，亚历山德拉

4

14 回答 14

62

根据引导维基，它必须是

<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 %>
于 2013-05-14T08:55:51.877 回答
24

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

于 2012-09-19T03:22:08.480 回答
5 
 <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>
于 2012-09-19T04:23:08.293 回答
5

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

正确答案如下：

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

有两件事是必要的：

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

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

于 2013-08-02T22:20:03.913 回答
3 
  <div class="form-inline">
    <%= f.check_box :subscribed, class: 'form-control' %>
    <%= f.label :subscribed, "Subscribe" %>
  </div>
于 2016-02-15T00:31:15.567 回答
2

前几天我遇到了类似的问题，我使用的是 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;
}
于 2012-09-19T03:26:35.010 回答
2

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

<%= f.label :my_field do %>
  <%= f.check_box :my_field %> <%= t 'activerecord.attributes.my_model.my_field' %>
<% end %>
于 2014-02-10T14:15:52.947 回答
2

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

  <%= 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>
于 2016-12-06T16:50:18.957 回答
1

对于基本的rails标签：

<%= label_tag('retry-all') do %>
  Retry All
  <= check_box_tag("retry-all",false) %>
<% end %>
于 2016-11-16T04:33:19.813 回答
0

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

于 2012-09-19T10:35:32.103 回答
0

对于引导程序 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&mdash;be sure to include why it's great </label> </div>

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

于 2017-04-14T05:47:42.463 回答
0 
<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>
于 2018-08-02T20:17:05.870 回答
0

在 Rails 5.2、ruby 2.4 和 bootstrap 4.1.1 上：

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

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

于 2019-07-22T19:11:32.263 回答
-2

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

 input {
    float:left;
    width:auto;
}
label{
    display:inline;
}
于 2016-08-09T07:54:09.270 回答