Bootstrap 下拉切换正在页面滚动上添加“dropup”类答案

【问题标题】：Bootstrap 3 dropdown toggle is adding 'dropup' class on page scrollBootstrap 下拉切换正在页面滚动上添加“dropup”类
【发布时间】：2016-06-25 12:29:04
【问题描述】：

想要的结果：

防止 boostrap 将dropup 类添加到下拉切换元素

根据您在页面上的位置（因为下拉菜单下方的“空间”比上方多），下拉菜单的选项显示在实际选择的下方或上方。我查看了 bootstrap 文档，只发现了这个：

Bootstrap Dropdown

将下拉菜单的触发器和下拉菜单包装在 .dropdown 或另一个声明 position: relative; 的元素中。然后添加菜单的 HTML。

然后向上：

通过将 .dropup 添加到父级，可以将下拉菜单更改为向上（而不是向下）扩展。

然而，包装器根本没有这两个类中的任何一个。因此，我在包装器中添加了dropdown 类：

您可以看到页面底部的空间比顶部还多。

但是，当在页面上向上滚动时（将 dropdown 类添加到包装器中），引导程序会自动添加 dropup 类：

我最有可能使用 CSS/jQ 覆盖，但我不知道我是否缺少任何需要分配给包装器和/或下拉切换元素本身的默认引导类或数据属性.

【问题讨论】：

标签： jquery css twitter-bootstrap

【解决方案1】：

2020 年更新，供未来的搜索者使用。要避免或阻止您的 dropdown 自动添加 dropup 或任何其他自动翻转类，您可以这样做。

您可以将data-flip 属性添加到您的dropdown-toggle 元素，其值为false。

这是针对 Bootstrap 4 的，尚未在其他版本上尝试过。

例子：

<a href='#' class='dropdown-toggle' role="button" id="dropdownMenuLink" data-toggle='dropdown' aria-haspopup='true' aria-expanded='false' data-flip='false'>BUTTON</a>

【讨论】：

【解决方案2】：

经过一番研究，所有select 元素都在使用selectpicker()，并强制这些select 元素始终“下拉”，需要以下内容：

$('yourSelector').selectpicker({ dropupAuto: false });

【讨论】：

【解决方案3】：

抱歉我迟到了@Rob。是的，selectpicker() 是Bootstrap-Select的一部分

如果您对此不熟悉，请查看。它具有许多 Bootstrap 中缺少的功能。

注意：如果您看到“selectpicker”类，您正在处理 Bootstrap-Select

【讨论】：