这一直困扰着我。我试过从底部移除填充,将选择字段的大小设置为与面板内部高度相同的高度等。
这是我的 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;
}
最佳答案
右键单击 -> 检查有很大帮助。
你会看到 form-group
元素上有 margin-bottom
.form-group {
margin-bottom: 0;
}
关于javascript - 删除包含选择列表的 Bootstrap 面板中的所有空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43083825/