如何在引导不同形式的标签组按钮(How to group buttons in different

2019-07-30 08:59发布

你怎么组按钮不同形式的标签内一起在Twitter的引导?

现在,我得到的是:

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

如果你宁可不使用脚本,您可以使用隐藏的输入来创建正确的第一:孩子,最后:子关系:

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>

在引导的最新版本我也必须添加CSS覆盖的一位:

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


Answer 2:

您可以使用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();
}


文章来源: How to group buttons in different forms tags in Bootstrap