twitter-bootstrap 将引导复选框样式设置为没有 btn-group 的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31276261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style bootstrap checkboxes as buttons without btn-group
提问by Luciasar
I'm trying to get a list of items from my database, where each listed item is paired with a selectable button for "delete" in the Bootstrap alert style. When the user submits using a "delete selected" button at the bottom of the page, all the entries that were selected will be removed from the database.
我正在尝试从我的数据库中获取项目列表，其中每个列出的项目都与 Bootstrap 警报样式中的“删除”可选按钮配对。当用户使用页面底部的“删除所选”按钮提交时，所有被选择的条目都将从数据库中删除。
Now, Bootstrap's documentationonly explains how to style check boxes as buttons in a btn-groupdiv, which groups them all together in one line. I'm working with a list, so I don't want the checkbox buttons in a group: I need them per line, and clearly associated with the label of the entry they're deleting. But I can't seem to get the checkboxes to style as buttons without that btn-group div. It seems pretty arbitrary, and I'm wondering if there's an easy way to do this in bootstrap styling without resorting to hand-writing a bunch of javascript onclick events to use the regular bootstrap button type without checkboxes.
现在，Bootstrap 的文档只解释了如何将复选框设置为btn-groupdiv 中的按钮样式，将它们组合在一行中。我正在处理一个列表，所以我不想将复选框按钮放在一个组中：我每行都需要它们，并且与他们要删除的条目的标签明确相关联。但是如果没有那个 btn-group div，我似乎无法将复选框设置为按钮样式。这似乎很随意，我想知道是否有一种简单的方法可以在引导程序样式中做到这一点，而无需手写一堆 javascript onclick 事件来使用没有复选框的常规引导程序按钮类型。
Here's what I have right now, where I just put every checkbox by itself in its own little btn-group, but it formats all weird and autoselects the buttons by default:
这是我现在所拥有的，我只是将每个复选框单独放在自己的小 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
Is there a good way to do this in Bootstrap, or am I stuck writing it myself in js?
在 Bootstrap 中是否有一个很好的方法可以做到这一点，还是我自己在 js 中编写它？
回答by Dan Gamble
@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
This should work, as simple as just removing the btn-groupclass
这应该可以工作，就像删除btn-group类一样简单
