ブートストラップのフォームグループが間違った間隔で配置されています

Question

ウェルグループ内でフォームグループを使用していますが、 下端の余白が先頭よりも大きいです。です。私はそれが垂直に中心を置くようにしたい。

<div class="well"> 
<div class="form-horizontal"> 
    <div class="form-group"> 
    .... 
    <div class="form-group"> 
    .... 
</div> 
</div> 

スニペット

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="well"> 
 

 
    <div id="date_formatter_widget"> 
 

 
    <!-- Widget --> 
 

 
    <div class="form-horizontal"> 
 

 
     <div class="form-group"> 
 
     <div class="col-sm-9 text-right"> 
 
      <input type="text" class="form-control conversionPattern" id="pattern" placeholder="pattern here..."> 
 
     </div> 
 
     </div> 
 

 
     <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
      <input type="text" class="form-control conversionPattern" id="conversionPattern" placeholder="" readonly value="2015-05-21"> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 

 
    <!-- /Widget --> 
 

 
    </div> 
 

 
</div>

Answer 1

.form-groupの最後の子は、これを設定することによって除去することができるmargin-bottomを、持っている：

.form-horizontal .form-group:last-child {margin-bottom: 0;} 

.form-horizontal .form-group:last-child { 
 
    margin-bottom: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="well"> 
 

 
    <div id="date_formatter_widget"> 
 

 
    <!-- Widget --> 
 

 
    <div class="form-horizontal"> 
 

 
     <div class="form-group"> 
 
     <div class="col-sm-9 text-right"> 
 
      <input type="text" class="form-control conversionPattern" id="pattern" placeholder="pattern here..."> 
 
     </div> 
 
     </div> 
 

 
     <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
      <input type="text" class="form-control conversionPattern" id="conversionPattern" placeholder="" readonly value="2015-05-21"> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 

 
    <!-- /Widget --> 
 

 
    </div> 
 

 
</div>

プレビュー