Css 如何从集合复选框对齐输入和标签？

我正在使用

collection\u复选框

，在对齐复选框和文本时遇到问题。这是我的代码：

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

我正在尝试调整输入和标签，但没有成功。我见过这些问题，但它对我不起作用：

我想做到这一点：

[checkbox1] text1

[checkbox2] text2

[checkbox3] text3

---

谢谢你的帮助

集合复选框的定义：

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

最后一个参数允许您执行以下操作：（使用collection\u复选框，这正是您想要的）

阅读更多关于

还有另一种方法：根据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%;
}

.checkbox列表输入[type=“checkbox”]{
显示：内联块；
宽度：10%；
}
.checkbox列表输入[type=“checkbox”]+标签{
显示：内联块；
左边距：10%；
宽度：80%；
}

[复选框1]text1@Octopus-保罗，谢谢你，但如何将其应用于收款复选框？谢谢！它看起来很适合我。唯一的问题是，我不知道为什么它会这样说：

意外'，“，期望'”

对于这部分：

：dog_id，dog.所有的

请立即尝试。我做了一个小小的改变

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

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