css - Bootstrap 表单组的间距错误

Question

我在 well 元素中使用 form-groups，但是 底部可见边距比顶部多，这看起来不太好。我希望它垂直居中。

<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 的最后一个 child 有一个 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>

预览