如何保持一个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; }