如何在引导不同形式的标签组按钮 [英] How to group buttons in different forms tags in Bootstrap

问题描述

你怎么组按钮不同的表单标签内被一起Twitter的引导？

现在我得到的是：

 ＆LT; D​​IV CLASS =BTN-组＆GT;
    ＆LT;！ - 更多按钮 - ＆GT;
    ＆LT;形式的行动=的search.php的方法=POST＆GT;
    ＆LT;输入类型=隐藏名称=一些名价值=相同的值＆GT;
    ＆LT;按钮样式=浮动：左级=BTN类型=提交＆GT;＆LT; I类=图标搜索＆GT;＆LT; / I＆GT;详情＆lt; /按钮＆GT;
    ＆LT; /表及GT;
    ＆LT;！ - 编辑按钮 - ＆GT;
    ＆LT;形式的行动=edit_product.php方法=后＆GT;
    ＆LT;按钮类=BTN BTN-主要TYPE =提交名称=product_numberVALUE =一些价值＆GT;＆LT; I类=图标，齿轮图标白＆GT;＆LT; / I＆GT;编辑＆LT; /按钮＆GT;
     ＆LT; /表及GT;
     ＆LT;！ - 删除按钮 - ＆GT;
     ＆LT;按键数据拨动=模态的href =＃error_delete级=BTN BTN-危险＆GT;＆LT; I类=图标垃圾桶图标白＆GT;＆LT; / I＆GT;删除＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
 

解决方案

如果你不想使用脚本可以使用隐藏的输入来创建正确的第一：孩子和最后一个：子关系：

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

 ＆LT;窗​​体类=BTN-组＆GT;
    ＆LT;按钮类=BTN＆GT;按钮的One＆LT; /按钮＆GT;
    ＆LT;输入类型=隐藏类=BTN＆GT;＆LT;！ - 假的兄弟姐妹到右 - ＆GT;
＆LT; /表及GT;＆LT;窗​​体类=BTN-组＆GT;
    ＆LT;输入类型=隐藏类=BTN＆GT;＆LT;！ - 假的兄弟姐妹到左 - ＆GT;
    ＆LT;按钮类=BTN＆GT;两个按钮＆LT; /按钮＆GT;
＆LT; /表及GT;
 

在引导的最新版本我没有要补充的CSS覆盖的一位：

  form.btn组+ form.btn组{保证金左：-5px;}
 

How do you group buttons within different form tags together in Twitter's Bootstrap?

Right now what I get is:

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

解决方案

If you'd rather not use scripting you can use hidden inputs to create the proper first:child and last:child relationships:

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>

In the latest versions of Bootstrap I did have to add one bit of CSS override:

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

这篇关于如何在引导不同形式的标签组按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！