引导-仅选择与基础组件相同的选项列表

Question

我希望我能解释清楚这一点。我有一个在胸腺叶模板中表示数据列表的表。此表的标题是用于过滤其内容的表单。我的问题只有在表的内容非常短的情况下才会显现出来，比如只有一条记录。下面是一些代码来展示它的样子：

<div class="table-responsive">
<form name="fiterScanCodes" th:action="@{'/scanCodes/search'}" method="POST">
    <table class="table table-hover table-striped table-dark">
        <thead>
            <tr>
                <th>Scan Code</th>
                <th>Med</th>
            </tr>
            <tr>
                <th>
                    <input type="text" class="form-control" id="scanCodeFilter" name="scanCodeFilter" th:value="${scanCodeFilter}" 
                        placeholder="Search Scan Code" onchange="this.form.submit()"/>
                </th>
                <th>
                    <select class="form-control selectpicker" id="medFilter" name="medFilter" th:value="${medFilter}"
                        onchange="this.form.submit()" data-live-search="true" title="Select Med"> 
                        <option value="">Search Med</option>
                        <option th:each="med : ${meds}" th:value="${med.id}" 
                            th:text="${med.toString()}" th:selected="${med.id == medFilter}">
                            </option>
                    </select>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr th:each = "scanCode : ${scanCodes}">
                <td th:text = "${scanCode.scanCode}"></td>
                <td th:text = "${scanCode.med.toString()}"></td>
            </tr>
        </tbody>
    </table>
</form>
</div>

我的问题是，选项的可见部分仅与表本身一样长：

​

​

随着表格变得越来越大，我可以看到越来越多的选项，直到它最终完全出现：

​

​

是什么控制了这种行为，我如何才能让完整的选项列表始终显示？我尝试将selectpicker类的overflow属性设置为visible，但没有成功。

Answer 1

当然，我在写这篇文章2分钟后找到了答案，同时尝试了一些半随机的东西！我尝试设置overflow属性的方向是正确的，但我错误地将其应用于selectpicker类。overflow属性需要设置在基础容器上，而不是组件本身上。下面的CSS修复了这个问题：

.table-responsive
{
    overflow: visible;
}