Bootstrap 下拉切换正在页面滚动上添加“下拉"类 [英] Bootstrap dropdown toggle is adding 'dropup' class on page scroll

问题描述

想要的结果:

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

<小时>

根据您在页面上的位置(因为下拉菜单下方的空间"比上方多)，下拉菜单的选项显示在实际选择的下方或上方.我查看了引导程序文档，只遇到了这个:

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

但是，当在页面上向上滚动时(将 dropdown 类添加到包装器中)，bootstrap 会自动添加 dropup 类:

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

解决方案

经过研究，所有 select 元素都使用了 selectpicker()，并强制这些select 元素总是下拉"，需要以下内容:

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

Wanted Outcome:

Prevent boostrap from adding dropup class to the dropdown toggle element

---

Depending where you are on the page (as in the dropdown has more "space" below it than it does above), the dropdown's options either display below or above the actual select. I looked at the bootstrap documentation, and only came across this:

Bootstrap Dropdown

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

Then for up:

Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup to the parent.

The wrapper however, didn't have any of these 2 classes at all. Therefore, I added the dropdown class to the wrapper:

You can see that there is more space on the bottom of the page than the top still.

However, when scrolling up on the page (with the class dropdown added to the wrapper), bootstrap is automatically adding the dropup class:

I can override with CSS/jQ most likely, but I didn't know if there was anything I was missing as far as default boostrap classes or data attributes that need to be assigned to the wrapper and/or dropdown toggle element itself.

解决方案

After doing some research, all the select elements were using selectpicker(), and to force these select elements to always "drop down", the following is needed:

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

这篇关于Bootstrap 下拉切换正在页面滚动上添加“下拉"类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！