ボタンを含むブートストラップフォームを別のボタンの横にインラインで表示する

Question

"ページの表示"ボタンの横にある "ページの削除"ボタンを移動したいとします。ブートストラップでこれを行う簡単な方法はありますか？

HTMLの可読性を維持するため、h1と「ページを表示」ボタンをフォームにラップしたくありません。

<h1> 
    Edit page 
    <a target="_blank" class="btn btn-default" href="/view">View page</a> 
    <form role="form"> 
    <input type="submit" name="commit" value="Delete page" class="btn btn-danger btn btn-primary" data-confirm="Are you sure?" /> 
    </form> 
</h1> 

Answer 1

は、フォームにdisplay: inlineを追加します。

form{ 
    display: inline; 
} 

https://jsfiddle.net/ypkLaexL/

Answer 2

代替ソリューションは、あなたのHTMLを調整することであろう。フォームにpull-rightのクラスを追加すると、<h1>タグの右余白に揃えられ、<form>の内部にハイパーリンクを配置すると、ボタンが目的の結果に応じて配置されます。

追加ボーナス;ブートストラップフォームフレームワークを上書きするクラスは作成していません。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<h1> 
 
    Edit page 
 
    
 
    <form role="form" class="pull-right"> 
 
    <a target="_blank" class="btn btn-default" href="/view">View page</a> 
 
    <input type="submit" name="commit" value="Delete page" class="btn btn-danger btn btn-primary" data-confirm="Are you sure?" /> 
 
    </form> 
 
</h1>