html - .form-group 具有内部元素的高度

Question

我想将 border-right: 1px solid #2e2e2e 设置为 .form-group 元素，但它与其内容的高度不匹配并且它看起来很难看。

这是一个演示:

/* My styles */

.form-group {
  border-right: 1px solid #2e2e2e;
  padding: 0 10px;
}

.bootstrap-select.btn-group .dropdown-toggle {
    padding: 15px 40px 15px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
  <div class="form-group">
    <select class="selectpicker form-control">
      <option>Option #1</option>
      <option>Option #2</option>
      <option>Option #3</option>
    </select>
  </div>

  <div class="form-group">
    <select class="selectpicker form-control">
      <option>Option #1</option>
      <option>Option #2</option>
      <option>Option #3</option>
    </select>
  </div>
  <button type="submit" class="btn btn-info">Send</button>
</form>

编辑:以全页模式运行它。

Answer 1

将height:auto;设置为.form-control