Bootstrap form-groups in well wrong spacing

Question

I use form-groups in a well element, but the bottom visible margin is more than the top, and this is not looking good. I want it to be centrelised vertically.

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

Snippet

<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

The .form-group's last child has a margin-bottom, which can be removed by setting this:

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

Preview