2012-07-11 13 views
9

में विभिन्न रूपों के टैग में बटन कैसे समूहित करें आप ट्विटर के बूटस्ट्रैप में अलग-अलग फ़ॉर्म टैग के साथ बटन कैसे समूहबद्ध करते हैं?बूटस्ट्रैप

अभी मैं क्या मिलता है:

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

उत्तर

15

आप पटकथा का उपयोग नहीं बल्कि चाहते हैं, तो आप उचित पहले बनाने के लिए छिपा आदानों का उपयोग कर सकते

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> 

बूटस्ट्रैप के नवीनतम संस्करणों में मुझे एक बिट सीएसएस ओवरराइड जोड़ना पड़ा:

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

आप इसे प्राप्त करने के लिए JQuery का उपयोग कर सकते हैं।

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

और JQuery के साथ: बच्चे और पिछले: बच्चे के सम्बन्ध:

$("#more").click(function() { 
    $("#form1").submit(); 
} 
संबंधित मुद्दे