如何保持一个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"} %> 
有两件事是必要的:
- 标签元素上的类
- 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—be sure to include why it's great </label> </div>
第一种方法是更正确的方法,但第二种方式看起来几乎完全相同,DRYer。
我使用纯CSS / HTML和这个CSS工程对我有好处。
  input { float:left; width:auto; } label{ display:inline; }