css - 引导表单组的间距错误

我在well元素中使用表单组，但是
底部的可见边距大于顶部，这看起来不太好。我希望它垂直居中。

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

最佳答案

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

预习

关于css - 引导表单组的间距错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37768602/