送信ボタンがブートストラップで動作しないbtn-groupクラス

Question

送信ボタン1つと残りのボタンがチェックボックスとして機能するブートストラップ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-グループブロックのうち、送信ボタンを置く場合：

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

However, it looks ugly

だからでありますチェックボックスとして多くのボタンを使用でき、1つのブートストラップボタングループでサブミットするように機能することが可能ですか？

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>