Bootstrap select会在提交表单时在下拉菜单的顶部添加额外的剩余空间(如图片所示)。
下拉标记
<div class="container-fluid form-group">
<div class="row">
<div class="col-md-3">
<label for="template">Templates</label>
<select id="template" class="selectpicker form-control" data-live-search="true" name="template">
<option value="0" data-query="NONE">Select Template</option>
<c:forEach var="template" items="${templateDetails}">
<option value="${template.templateId}" data-query="${template.query}">${template.templateName}</option>
</c:forEach>
</select>
</div>
</div>
</div>
渲染标记
<div class="col-md-3">
<label for="template">Templates</label>
<div class="btn-group bootstrap-select form-control">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" data-id="template" title="sample_template" aria-expanded="false"><span class="filter-option pull-left">sample_template</span> <span class="bs-caret"><span class="caret"></span></span></button>
<div class="dropdown-menu open" role="combobox" style="max-height: 287px; overflow: hidden; min-height: 42px;">
<div class="bs-searchbox">
<input type="text" class="form-control" autocomplete="off" role="textbox" aria-label="Search">
</div>
<ul class="dropdown-menu inner" role="listbox" aria-expanded="false" style="max-height: 233px; overflow-y: auto; min-height: 0px;">
<li data-original-index="0" class="active"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Select Template</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="1" class="selected"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true"><span class="text">sample_template</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="2"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">sample_template_2</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
</ul>
</div>
<select id="template" class="selectpicker form-control" data-live-search="true" name="template" tabindex="-98">
<option value="0" data-query="NONE">Select Template</option>
<option value="1008" data-query="query2">sample_template</option>
<option value="1009" data-query="query1">sample_template_2</option>
</select>
</div>
</div>
如何解决此问题?