Cómo botones de grupo en diferentes formas en las etiquetas Bootstrap

Question

¿Cómo se botones de grupo dentro de las diferentes etiquetas de formulario juntos en de Twitter Bootstrap?

En este momento lo que consigo es:

<div class="btn-group"> 
    <!--More button--> 
    <form action="search.php" method="POST"> 
    <input type="hidden" name="some name" value="same value"> 
    <button style="float:left" class="btn" type="submit"><i class="icon-search"></i> More</button> 
    </form> 
    <!--Edit button--> 
    <form action="edit_product.php" method="post"> 
    <button class="btn btn-primary" type="submit" name="product_number" value="some value"><i class="icon-cog icon-white"></i> Edit</button> 
    </form> 
    <!--delete button--> 
    <button data-toggle="modal" href="#error_delete" class="btn btn-danger"><i class="icon-trash icon-white"></i> Delete</button> 
</div> 

Answer 1

Si prefiere no utilizar secuencias de comandos que puede utilizar entradas ocultos para crear los adecuados en primer lugar: los niños y última: niño relaciones:

http://jsfiddle.net/isherwood/TRjEp/1

<form class="btn-group"> 
    <button class="btn">Button One</button> 
    <input type="hidden" class="btn"><!-- fake sibling to right --> 
</form> 

<form class="btn-group"> 
    <input type="hidden" class="btn"><!-- fake sibling to left --> 
    <button class="btn">Button Two</button> 
</form> 

En las últimas versiones de Bootstrap tuve que agregar un bit de sobrescritura de CSS:

form.btn-group + form.btn-group {margin-left: -5px;} 

Answer 2

Puede utilizar jQuery para lograrlo.

<form id="form1" action="search.php" method="POST"> 
<input type="hidden" name="some name" value="same value"> 
</form> 

<form id="form2" action="edit_product.php" method="post"> 
</form> 

<div class="btn-group"> 
<button id="more" style="float:left" class="btn" type="submit"><i class="icon-search"></i> More</button><!--More button--> 
<button id="edit" class="btn btn-primary" type="submit" name="product_number" value="some value"><i class="icon-cog icon-white"></i> Edit</button> 
<button data-toggle="modal" href="#error_delete" class="btn btn-danger"><i class="icon-trash icon-white"></i> Delete</button>  
</div> 

Y con jQuery:

$("#more").click(function() { 
    $("#form1").submit(); 
}