javascript - 删除包含选择列表的 Bootstrap 面板中的所有空格

Question

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

这是我的 jsfiddle，所以你可以看到我在说什么:jsfiddle

我只是想让该选择列表跨越面板的整个高度，底部没有空白。

我也试过使用 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>

还有我的CSS:

.patient-list {
    font-size: 20px;
    border: none;
}

.panel-body.scroll-list {
    padding: 0px 0px 0px 0px;
}

下面是我列表中那个丑陋的空格:

Answer 1

右键单击 -> 检查有很大帮助。

你会看到 form-group 元素上有 margin-bottom

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