13

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

3 に答える 3

17

スクリプトを使用したくない場合は、非表示の入力 (または などの任意のインライン要素<i></i>) を使用して、適切な first:child および last:child 関係を作成できます。

フィドルのデモ

<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 オーバーライドを 1 つ追加する必要がありました。

form.btn-group + form.btn-group {margin-left: -5px;}
于 2013-07-11T20:44:29.560 に答える
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();
}
于 2012-07-12T21:29:20.850 に答える
0

sbtn-groupを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余分なマージンを a に追加しませんbtn-group。それどころか、m*ツールバーのグループ間にスペースが必要な場合は、実際には自分でクラスを追加する必要があります。

古いバージョンの Bootstrap (<=v3) を使用している場合は、@isherwood のソリューションを適用してください。

于 2021-02-24T11:30:46.800 に答える