javascript - 表单字段选择总是向下增长 - Bootstrap 4

Question

我使用 bootstrap 4 我希望我的领域总是向下发展。永不上升，无论屏幕的哪一半是 select 形式。

如何实现这种效果？我尝试使用此 data-dropup-auto="false" 但无济于事。

想要的效果

副作用

我的表单示例:

<!-- form -->
<tr>
    <th></th>
    <td>
        <select name="city" class="form-control bg-white text-dark" data-dropup-auto="false" id="id_city">
            <option value="" selected>Choose your city...</option>
            <option value="1">Chorzów (3)</option>
            <option value="2">Katowice (3)</option>
            <option value="3">Diffrent (4)</option>
            <option value="4">Mallorcowo (3)</option>
            <option value="5">Milaberalinto (4)</option>
            <option value="6">Kalineskow (2)</option>
        </select>
    </td>
</tr>
<!-- end form -->

Answer 1

您正在使用 native select 元素，因此您无法控制其显示。浏览器根据其相对于视口(viewport)的位置自动确定如何显示它。

控制它的唯一方法是使用自定义下拉列表，该列表可与 JavaScript 一起使用，而不是与 native select HTML 元素一起使用。

Bootstrap 提供了这种自定义下拉菜单，并且有一些选项可以帮助您实现您想要的:https://getbootstrap.com/docs/4.0/components/dropdowns/#options (你需要的是将 boundary 选项设置为 window)