Twitter Bootstrap 3チェックボックスがフォームの残りの部分と整列しない

Question

Twitterのブートストラップフォームの整列に問題があります。私はその下のdivがincorrectly line upにグリッドを持つチェックボックスを持っています。なぜなら、その横のdivが74pxのときに高さが70pxしかないからです。私は必要なピクセルの高さに強制的にCSSを追加することができます（id "test"を参照）が、コンテンツが小さい画面に応答するとき、固定された高さを維持したくありません。これを修正するにはどうすればよいでしょうか？

 <div class="container-fluid appointment"> 
    <div class="container">  
    <div class="row"> 
     <h2 class="text-center">Appointment Request</h2> 
     <form> 
      <div class="col-sm-4">     
      <div class="form-group"> 
       <label for="">Phone Number:</label> 
       <input type="tel" class="form-control" id="phone"> 
      </div> 
      </div> 

      <div class="col-sm-8">     
      <div class="form-group"> 
       <label for="email">Email Address:</label> 
       <input type="email" class="form-control" id="email"> 
      </div> 
      </div> 

      <div class="col-sm-7">     
      <div class="form-group"> 
       <label for="petname">Pet's Name:</label> 
       <input type="text" class="form-control" id="petname"> 
      </div> 
      </div> 

      <div class="col-sm-5" id="test">    
      <div class="form-group"> 
       <label>Is your pet neutered or spayed?</label> 
       <div class="checkbox"> 
       <label for="neutered"><input type="checkbox" id="neutspay">Neutered/Spayed</label> 
       </div> 
      </div> 
      </div> 

      <div class="col-sm-4">     
      <div class="form-group"> 
       <label for="pettype">Pet Type:</label> 
       <select class="form-control" id="pettype"> 
       <option>Select Pet Type...</option> 
       </select> 
      </div> 
      </div> 

      <div class="col-sm-4">     
      <div class="form-group"> 
       <label for="breed">Breed Type:</label> 
       <select class="form-control" id="breed"> 
       <option>Select Breed...</option> 
       </select> 
      </div> 
      </div> 

      <div class="col-sm-2">     
      <div class="form-group"> 
       <label for="age">Pet Age:</label> 
       <select class="form-control" id="age"> 
       <option>Select Pet Age...</option> 
       <option value="less than 1">Less than 1 year</option> 
       <option value="1">1 Year</option>         
       </select> 
      </div> 
      </div> 

      <div class="col-sm-12 text-center">                    
      <div class="form-group"> 
       <button type="submit" class="btn btn-lg">Send Appointment</button> 
      </div> 
      </div> 
     </form> 
    </div> 
    </div> 
</div> 

Answer 1

だけ

<div class="col-sm-5" id="test">    
     <div class="form-group clearfix"> 
      <label>Is your pet neutered or spayed?</label> 
      <div class="checkbox"> 
       <label for="neutered"><input type="checkbox" id="neutspay">Neutered/Spayed</label> 
      </div> 
     </div> 
</div>