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

Question

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

这是我的傻瓜，所以你可以看到我在说什么：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

右键单击 - ＆gt;检查帮助很多。

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

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

Answer 2

试试这个：

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

updated link

<强>能解密

如果更改form-group类属性，它将在引导程序中生效，因为form-group类全局使用表单..所以通过将其作为子div来更改其属性。