Bootstrap 4-输入组附加复选框和标签

Question

我能够在输入组中添加复选框和标签，尽管如图所示，填充已关闭。

使用pl-4更好，但不正确。

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">
      <%= ff.remove_nested_fields_link fa_icon('trash-alt', type: :solid, class: 'icon-trash') %>
    </span>
  </div>
  <%= ff.collection_select(:store_id, Store.all, :id, :label, {}, {class: "custom-select"}) %>
  <div class="input-group-append">
    <div class="input-group-text pl-4">
      <%= ff.check_box :manager, class: "form-check-input" %>
      <%= ff.label :manager, class: "form-check-label" %>
    </div>
  </div>
</div>

有什么建议吗？

Answer 1

对于Bootstrap v4.3.1，您可以使用以下... form-check-input ml-0，form-check-label ml-3

<div class="input-group-append">
    <div class="input-group-text">
        <input type="checkbox" class="form-check-input ml-0" id="exampleCheck1">
        <label class="form-check-label ml-3" for="exampleCheck1">Check me out</label>
    </div>
</div>

Answer 2

我尝试在form-check-inline内使用input-group-text布局。检查一下：

<div class="input-group-text">
     <div class="form-check-inline">
          <label class="form-check-label">
              <input type="radio" class="form-check-input">Option 2
          </label>
      </div>
 </div>