html - 启用实时数据搜索时，引导选择下拉对齐中断

Question

我正在使用 bootstrap-select 在我的 HTML 表单中添加下拉菜单。当我在下拉列表中启用实时数据搜索选项时，它的对齐会中断。请参见下图，

启用实时数据搜索

未启用实时数据搜索

这是我的下拉 HTML 代码

<label for="emp_location">Location <sup style="color:red">*</sup></label>
                                <div class="form-group">
                                    <div class="form-line">
                                        <select name="emp_location" data-size="5" data-live-search="true"  data-container="body" id="location" class="form-control show-tick selectpicker" title="Choose one of the following...">
                                            <?php foreach ($locations as $location) : ?>
                                                <option value="<?= $location->id ?>" <?= !empty($emp) ? ($emp->location == $location->id ? 'selected' : '')  : '' ?>><?= $location->city_name ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                </div>

我还没有为此编写任何自定义 CSS。任何帮助，将不胜感激...

标签： htmlcsstwitter-bootstrapdrop-down-menubootstrap-4