ボタンと入力（フォーム上）を整列させ、ブートストラップのパネル見出しで右に引っ張る方法

Question

私は左にタイトルを、右にボタンを持つブートストラップパネルを持っています。 それらのうちの1つが入力（twigテンプレートでレンダリングされたフォーム、symfonyプロジェクト）であるため、正しく整列できません。ここで

はjsfiddle exempleです：あなたはdisplay: inline-block;を使って、この動作を上書きする必要がありますので https://jsfiddle.net/yornletard/9vbr7awb/

<div class="panel panel-info"> 
    <div class="panel-heading clearfix"> 
    <h3 class="panel-title pull-left" style="padding-top: 7.5px;">Echantillon : origine</h3> 
    <div class="btn-group pull-right"> 
     <a href="/fr/sample/12/edit"> 
     <button class="btn btn-info btn-sm"><i class="fa fa-pencil"></i> Modifier</button> 
     </a> 
     <form name="form" method="post" action="/fr/sample/12"> 
     <input type="hidden" name="_method" value="DELETE"> 
     <input type="submit" value=" Supprimer l'échantillon" class="fa btn btn-info btn-sm"> 
     <input type="hidden" id="form__token" name="form[_token]" value="uBwVtOMyGwX0omj_5gLkEAGvzHkNvH5L1NXUsVKYFr4"> 
     </form> 
    </div> 
    </div> 
    <div class="panel-body"> 
    Echantillon : origine 
    </div> 
</div> 

Answer 1

は<form>は、デフォルトではdisplay: block;でレンダリングされます。

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="panel panel-info"> 
 
    <div class="panel-heading clearfix"> 
 
    <h3 class="panel-title pull-left" style="padding-top: 7.5px;">Echantillon : origine</h3> 
 
    <div class="btn-group pull-right"> 
 
     <a href="/fr/sample/12/edit" class="btn btn-info btn-sm"><i class="fa fa-pencil"></i> Modifier</a> 
 
     <form name="form" style="display:inline-block" method="post" action="/fr/sample/12"> 
 
     <input type="hidden" name="_method" value="DELETE"> 
 
     <button class="btn btn-info btn-sm"> 
 
     Supprimer l'échantillon 
 
     </button> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div> 
 
    <div class="panel-body"> 
 
</div>