如何从collection_check_boxes对齐输入和标签? [英] How to align input and label from collection_check_boxes?
问题描述
我正在使用 collection_check_boxes
,并且在对齐复选框和文本时遇到问题.这是我的代码:
I am using collection_check_boxes
and have problems with aligning checkbox and text. This is my code:
<div class="col-md-4">
<%= f.collection_check_boxes :dog_ids, Dog.all, :id, :name %>
</div>
表单显示如下:
[checkbox1]
text1
[checkbox2]
text2
[checkbox3]
text3
我正在尝试对齐输入和标签,但是没有成功.我已经看到了以下问题,但对我不起作用:
I am trying to align input and label but didn't have success. I have seen these question but it don't work for me: Align checkboxes for f.collection_check_boxes with Simple_Form
我想做到这一点:
[checkbox1] text1
[checkbox2] text2
[checkbox3] text3
谢谢您的帮助!
推荐答案
collection_check_boxes
的定义:
collection_check_boxes(object, method, collection, value_method, text_method, options = {}, html_options = {}, &block)
最后一个参数允许您执行以下操作:(这完全符合您使用collection_check_boxes的要求)
The last argument permits you to do something like this: (this does exactly what you want using collection_check_boxes)
<%= f.collection_check_boxes(:dog_ids, Dog.all, :id, :name) do |b| %>
<div class="row">
<%= b.label(class: "check_box") do %>
<div class="col-xs-4">
<%= b.check_box(class: "check_box") %>
</div>
<div class="col-xs-8">
<%= b.object.name %>
</div>
<% end %>
</div>
<% end %>
还有另一种方法:通过CSS设置复选框输入和标签的样式.
There is another method too: style your checkbox input and your label from css.
为了获得更好的CSS特异性,我将添加一个名为复选框列表"的新类:
For a better css specificity I will add a new class named 'checkbox-list' to:
<div class="col-md-4 checkbox-list">
<%= f.collection_check_boxes :dog_ids, Dog.all, :id, :name %>
</div>
.checkbox-list input[type="checkbox"] {
display: inline-block;
width: 10%;
}
.checkbox-list input[type="checkbox"] + label {
display: inline-block;
margin-left: 10%;
width: 80%;
}
这篇关于如何从collection_check_boxes对齐输入和标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!