复选框 - 内联将复选框放在文本上而不是

Question

我试图在我的表单中添加复选框，但是引导类＆＃34; checkbox-inline＆＃34;似乎不适合我。

以下是代码：

<strong>Styles:</strong>
<%= f.collection_check_boxes :style_ids, Style.all, :id, :name do |cb| %>
  <% cb.label(class: "checkbox-inline input_checkbox") {cb.check_box(class: "checkbox") + cb.text} %>
<% end %>
<br><br>

<strong>Ingredients:</strong>
<%= f.collection_check_boxes :ingredient_ids, Ingredient.all, :id, :name do |cbi| %>
  <% cbi.label(class: "checkbox-inline input_checkbox") {cbi.check_box(class: "checkbox") + cbi.text} %>
<% end %>

结果如下：

任何有关这方面的帮助都会非常有用，一直把头发拉过来。

编辑：完成bootstrap文档后，会出现checkbox-inline和radio-inline。我只需要弄清楚如何获取每个标签旁边的复选框

编辑2：想出来！在我的CSS中我有

input {
  width: 100%;
}

我删除了这个，我的表单坏了，但我的复选框在正确的位置！所以我只是做了

.input_checkbox input {
  width: auto !important;
}

- 一切都终于得到了解决。

Answer 1

以下是Bootstrap 4和两个内联复选框的示例。用Ruby实现这个结构应该不难：

<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap>
    <card1 fxFlex fxFlex.gt-sm="33" fxFlex.sm="50"></card1>
    <card1 fxFlex fxFlex.gt-sm="33" fxFlex.sm="50"></card1>
    <card1 fxFlex fxFlex.gt-sm="33" fxFlex.sm="50"></card1>
    <card1 fxFlex fxFlex.gt-sm="33" fxFlex.sm="50"></card1>
    <card1 fxFlex fxFlex.gt-sm="33" fxFlex.sm="50"></card1>
    <card1 fxFlex fxFlex.gt-sm="33" fxFlex.sm="50"></card1>
    <card1 fxFlex fxFlex.gt-sm="33" fxFlex.sm="50"></card1>
</div>

https://jsfiddle.net/30c40odf/

Answer 2

尝试以下代码

<%= f.collection_check_boxes :style_ids, Style.all, :id, :name do |cb| %>
  <%= cb.label  { "#{cb.check_box} #{cb.text}".html_safe } %>
<% end %>

Answer 3

您可以尝试如下：

<div class="form-group">
  <label>Styles:</label>

      <%= f.collection_check_boxes :style_ids, Style.all, :id, :name do |cb| %>
        <% cb.label(class: "checkbox-inline input_checkbox") {cb.check_box(class: "checkbox") + cb.text } %>
      <% end %>
</div>

我认为这会有所帮助