如何在 Bootstrap 中对不同表单标签中的按钮进行分组

Posted 2023-02-22

【中文标题】如何在 Bootstrap 中对不同表单标签中的按钮进行分组

【英文标题】：How to group buttons in different forms tags in Bootstrap

【发布时间】：2012-07-10 19:39:31

【问题描述】：

如何在 Twitter 的 Bootstrap 中将不同表单标签内的按钮组合在一起？

现在我得到的是：

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

【参考方案1】：

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

【参考方案2】：

如果您不想使用脚本，您可以使用隐藏输入（或任何内联元素，例如 <i></i>）来创建正确的 first:child 和 last:child 关系：

Fiddle demo

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

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

在最新版本的 Bootstrap 2 中，我确实必须添加一点 CSS 覆盖：

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

【参考方案3】：

将btn-groups 包装在btn-toolbar 中

如果您使用的是 Bootstrap v4 或更新版本：

<div class=btn-toolbar>
    <form class=btn-group>
        <button class="btn btn-outline-primary">Button One</button>
        <i></i>
    </form>
    <form class=btn-group>
        <i></i>
        <button class="btn btn-outline-primary">Button Two</button>
    </form>
</div>

(JSFiddle)

从 v4 开始，btn-toolbar 不会为 btn-group 添加任何额外的边距；相反，如果您需要工具栏中的组之间的任何间距，您实际上必须自己添加 m* 类。

如果您使用的是旧版本的 Bootstrap (@isherwood's solution。