Javascript 删除包含选择列表的引导面板中的所有空白

这一直困扰着我。我尝试从底部移除填充，将选择字段的大小设置为与面板内部高度相同的高度，等等

这是我的JSFIDLE，您可以看看我在说什么：

我只是想让选择列表覆盖整个面板的高度，底部没有空白

我也尝试过使用JQuery，但没有成功。如果我调整“选择”菜单的大小，所有内容都会变大，而空白会保留下来。javascript解决方案也可以

这是我的html：

<div class="panel panel-default" id="obs-list">
  <div class="panel-heading">
    <h3 class="panel-title">Observations</h3>
  </div>
  <div class="panel-body scroll-list" id="list-panel">
    <div class="form-group">
      <select class="form-control patient-list noglow" id="observation" name="observation" size="7">
        <option value="1">2017-03-23 04:40:36</option>
        <option value="2">2017-03-23 04:50:32</option>
        <option value="4">2017-03-28 04:18:55</option>
        <option value="5">2017-03-28 19:01:34</option>
        <option value="11">2017-03-28 22:06:25</option>
        <option value="12">2017-03-28 22:37:32</option>
        <option value="13">2017-03-28 23:10:19</option>
        <option value="14">2017-03-29 02:17:57</option>
      </select>
    </div>
  </div>
</div>

下面是我列表中看起来很难看的空白：

---

右键单击->检查帮助很多

您将看到元素

表单组

上有

页边距底部

.form-group {
  margin-bottom: 0;
}

试试这个：

.panel-body .form-group {
  margin-bottom:0px;
}

说明

---

如果更改

表单组

类属性，它将在引导中生效，因为

表单组

类对表单全局使用。。因此，通过将其设置为子div来更改其属性。

不确定我是否理解您的问题。但这是您想要的输出吗？我甚至没有考虑父级的边距。好。。。不会再犯那样的错误了。

.panel-body .form-group {
  margin-bottom:0px;
}