Bootstrap表单组的间距错误

Question

我在井元素中使用表单组，但是 底部可见边距超过顶部，这看起来不太好。我想让它垂直中心化。

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

段

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

预览