Question

请问您如何实现bootstrap btn-group元素，该元素由一个提交按钮组成，其余按钮用作复选框。实际上我已经创建了所提到的但是我的提交按钮不起作用，当它被按下时，没有任何反应。这就是我现在所拥有的：

<form class="form-group" action ="" method = "get" novalidate>
<div class="btn-group-vertical" data-toggle="buttons">
    <button type="submit" class="btn btn-success">Search</button>
    <label class="btn btn-primary">
        <input type="checkbox" name="select_tag" value="2" id="id_select_tag_0" /> Mysql
    </label >
    <label class="btn btn-primary">
        <input type="checkbox" name="select_tag" value="3" id="id_select_tag_1" /> Disk health
    </label2>       
</div>
</form>

And the block looks like this

如果我将提交按钮放在btn-group块之外，它可以工作：

<form class="form-group" action ="" method = "get" novalidate>
<button type="submit" class="btn btn-success">Search</button>
...

However, it looks ugly

那么有可能有很多按钮作为复选框工作，而一个按钮在一个引导按钮组中作为提交工作吗？

Answer 1

你可以使用javascript：

<form class="form-group" action ="" method = "get" novalidate>
<div class="btn-group-vertical" data-toggle="buttons">
    <button type="button" onClick="javascript:document.forms[0].submit();" class="btn btn-success">Search</button>
    <label class="btn btn-primary">
        <input type="checkbox" name="select_tag" value="2" id="id_select_tag_0" /> Mysql
    </label >
    <label class="btn btn-primary">
        <input type="checkbox" name="select_tag" value="3" id="id_select_tag_1" /> Disk health
    </label2>       
</div>
</form>

Answer 2

您的表单元素中似乎有一些奇怪的空格，并且没有设置操作。

尝试替换：

<form class="form-group" action ="" method = "get" novalidate>

使用

<form class="form-group" action="#" method="get" novalidate>

Answer 3

只需删除data-toggle="buttons"

提交按钮在bootstrap btn-group类中不起作用

3 个答案: