html - 将 Bootstrap 复选框样式设置为没有 btn-group 的按钮

Question

我正在尝试从我的数据库中获取元素列表，其中每个列出的元素都与 Bootstrap 警报样式中的“删除”可选按钮配对。当用户使用页面底部的“删除选定项”按钮提交时，所有选定的条目都将从数据库中删除。

现在，Bootstrap 的 documentation仅说明如何将复选框样式设置为 btn-group div 中的按钮，该 div 将它们全部组合在一行中。我正在处理一个列表，所以我不想要一个组中的复选框按钮:我每行都需要它们，并且清楚地与它们要删除的条目的标签相关联。但是如果没有 btn-group div，我似乎无法将复选框设置为按钮样式。这看起来很武断，我想知道是否有一种简单的方法可以在 Bootstrap 样式中执行此操作，而无需手写一堆 javascript onclick 事件来使用不带复选框的常规 Bootstrap 按钮类型。

这是我现在所拥有的，我只是将每个复选框单独放在它自己的小 btn-group 中，但它的格式很奇怪，默认情况下会自动选择按钮:

@foreach ($data['entries'] as $entry) <!-- blade template stuff -->
            <div class="btn-group" data-toggle="buttons">
                    Label of the database entry
                    <label class="btn btn-danger active">
                        <input type="checkbox" autocomplete="off"> Delete
                    </label>
            </div>
            </br>
            </br>
@endforeach

有没有在 Bootstrap 中执行此操作的好方法，还是我自己用 js 编写？

Answer 1

@foreach ($data['entries'] as $entry) <!-- blade template stuff -->
  <div data-toggle="buttons">
    Label of the database entry

    <label class="btn btn-danger">
      <input type="checkbox" autocomplete="off"> Delete
    </label>
  </div>
@endforeach

这应该可以工作，就像删除 btn-group 类一样简单