부적절한 간격의 부트 스트랩 폼 그룹

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; 
 
}

<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>

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

미리보기 그것은 약 때문에 잘의 '패딩'의이다