Question

我正在使用collection_check_boxes，并且在对齐复选框和文字时遇到问题。这是我的代码：

<div class="col-md-4">
  <%= f.collection_check_boxes :dog_ids, Dog.all, :id, :name %>
</div>

表单显示如下：

[checkbox1]
  text1

[checkbox2]
  text2

[checkbox3]
  text3

我正在尝试调整输入和标签，但没有成功。我看过这些问题，但它不适合我：Align checkboxes for f.collection_check_boxes with Simple_Form

我想完成这个：

[checkbox1] text1

[checkbox2] text2

[checkbox3] text3

感谢您的帮助！

Answer 1

collection_check_boxes的定义：

collection_check_boxes(object, method, collection, value_method, text_method, options = {}, html_options = {}, &block)

最后一个参数允许你做这样的事情:(这完全符合你想要的使用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 %>

详细了解collection_check_boxes

还有另一种方法：设置复选框输入和css中的标签。

为了获得更好的css特异性，我将添加一个名为“checkbox-list”的新类：

<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对齐输入和标签？

1 个答案: