如何保持一个checkbox和标签在Rails窗体中的同一行?

我应该怎样做一个checkbox的标签在一个包含一个表单的轨道视图checkbox在同一行?

目前标签在下一行:

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

谢谢你,亚历山德拉

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

根据引导维基 ,它一定是

 <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 %> 
  <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.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. checkbox元素必须位于标签元素之前。

这一点很明显,一旦你看到它的工作,但所有其他样本form_for总是有标签后面的input,你需要改变了checkbox。

我有一个类似的问题,即时通讯使用Twitter靴子,但即时通讯也使用simple_formgem。 我不得不通过CSS修复这个细节,这里是我的代码:

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

CSS:

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

为了让i18n使用label ,你可以使用t

 <%= f.label :my_field do %> <%= f.check_box :my_field %> <%= t 'activerecord.attributes.my_model.my_field' %> <% end %> 
  <div class="form-inline"> <%= f.check_box :subscribed, class: 'form-control' %> <%= f.label :subscribed, "Subscribe" %> </div> 

对于基本的导轨标签:

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

你使用bootstrap ? 简单的方法是在f.submit中添加:class => "span1" 。 我确定它的工作!

我会将checkbox包装在标签内。

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

当input字段被标签包装时,实际上不需要标签上的for属性。 单击时,标签将激活checkbox。 所以更简单:

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

对于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://v4-alpha.getbootstrap.com/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。

我使用纯CSS / HTML和这个CSS工程对我有好处。

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