ボタンと入力フォームとのラベルの整列

Question

ボタン要素を2つの他の入力要素とラベルで揃えようとしています。以下のブートストラップスニペットを使用：

<div class="row centered-form center-block "> 
    <div class="container col-md-6 col-md-offset-3"> 
    <form action="/result" class="form-inline" method="get" role="form"> 
     <div class="row"> 
     <div class="form-group col-md-6"> 
      <label class="control-label" for="County">Prop1, Prop2</label> 
      <input class="form-control" name="County" type="text" /> 
     </div> 
     <div class="form-group col-md-4"> 
      <label class="control-label" for="Type">Type of Election</label> 
      <select class="form-control" name="Type"><option value=""></option> 
       <option value="1">President</option> 
      </select> 
     </div> 
     <button class="btn btn-primary col-md-2" type="submit">Submit</button> 
    </div> 
    </form>  
    </div> 
</div> 

画像を私はこのようなルックスを取得しています：

私は入力から2からラベルを削除した場合、私が手：

フォームの入力にラベルを残してボタンと整列させるにはどうすればよいですか？

JSFiddle

Answer 1

私はボタンクラスがそのように動作しないと信じています。

更新：これは愚かですが動作します。それがうまくいくならば、それを混乱させないでください！代わりに不適切なラベルの

Answer 2

<div class="form-group col-md-2"> 
    <label class="control-label" for="btn"></label> 
    <button class="btn btn-primary" id="btn" name="btn" type="submit">Submit</button> 
</div> 

、垂直カラムの底部にあるボタンを整列させる（4 /フレキシボックスをブートストラップ）align-self-endクラスを使用します。

<div class="form-group col-md-2 align-self-end"> 
    <button class="btn btn-primary" id="btn" name="btn" type="submit">Submit</button> 
</div>