Question

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

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

这就是我现在所拥有的，我只是将每个复选框放在它自己的小btn组中，但它格式化所有奇怪并默认自动选择按钮：

@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类

一样简单

将bootstrap复选框设置为没有btn-group的按钮

1 个答案: