フィールドセットに合わせてボタンを整列する

Question

背景：私が取り組んでいるウェブサイトには、必要なデータだけを表示するために人々が使用できるいくつかのフィルタがあります。基本的なもの。私はCSSを傾けていないので、物事を美しく見せるために、私は物事をきれいに見せるためにブートストラップを使用しています。

問題：フィールドの右側にボタンが並んでいるように見えません。私は彼らをフィールドセットの端まで引っ張らせることができます、彼らは一般的な領域にプッシュ/プルすることができますが、私はそれらがうまく整列し、どのように再配置の方法にとどまることができませんページウィンドウのサイズ

JSFiddle：https://jsfiddle.net/v3cugpx1/1/

<div class="form-group col-md-12"> 
    <div class="input-group-btn"> 
     <div class="pull-right"> 
      <a class="btn btn-info" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left"></i> Clear</a> 
      <button class="btn btn-primary" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button> 
     </div> 
    </div> 
</div> 

任意の助けいただければ幸いです。

乾杯！

Answer 1

.input-groupの代わりにcol-sm-*クラスを使用しないでください。余分なパディングを複数回与えると、他のすべてのフォーム要素で使用できるパディングを一致させることができます。そして同様に、その中のボタンを配置：

<div class="form-group col-md-12"> <!-- Extra Padding (15px) --> 
    <div class="col-xs-12"> <!-- Extra Padding (15px) --> 
    <div class="col-xs-12"> <!-- Extra Padding (15px) --> 
     <a class="btn btn-info" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left pull-left"></i> Clear</a> 
     <button class="btn btn-primary pull-right" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button> 
     </div> 
    </div> 
</div> 

が更新Fiddleを見てください。

希望すると便利です。

Answer 2

入力にラッパー・コロンを使用しています。私は、ボタンの "フォームグループ"の前に1つの "col-md-12"とそれの後ろにもう1つを含めました。これにより、コードの一貫性を維持し、必要なものを達成できます。

<div class="col-md-12"> <---- 
    <div class="form-group col-md-12"> 
     <div class="col-md-12"> <---- 
      <div class="input-group-btn"> 

更新

Answer 3

Fiddleそれが原因で他の答えは時に発言グリッド内側溝の列のネストを一致させることが重要です。あなたが他の2つの答えで始まる場合、あなたが探しているボタンの間のマージンを追加するためにそれらを変更することは簡単です：

<div class="form-group col-md-12"> 
    <div class="col-md-12"> 
    <div class="btn-toolbar col-md-12"> 
     <a class="btn btn-info pull-right" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left"></i> Clear</a> 
     <button class="btn btn-primary pull-right" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button> 
    </div> 
    </div> 
</div> 

だけは本当に本当の付加は、最も内側のdiv要素にbtn-toolbarクラスです。後世にはFiddleです。