引导程序下拉列表显示不正确

Bootstrap dropdown not displaying correctly

本文关键字：不正确 列表显示 引导程序      更新时间：2023-09-26

当我出于某种奇怪的原因试图进行下拉时，当它被点击时，下拉菜单会显示在页面上，我甚至在实际的网站上看不到它，但JSFIDDLE会在屏幕上显示它。这是我测试的JSFIDDLE。

点击此处获取JSFIDDLE

以下是我目前正在做的事情。

<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" href="#">Applications<b class="caret"></b></button>
<ul class="dropdown-menu">
     <li><a href="/app/">My Applications</a></li>
     <li><a href="/app/staff">Staff Dashboard</a></li>
     <li><a href="/app/apply">Apply</a></li>
</ul>

感谢您提前提供的帮助。

您的代码中存在一些问题。比如缺少div、tabindex等。我修复了它，并检查它是否对你有帮助-

 <div class="dropdown">
 <button class="btn btn-default dropdown-toggle" 
 type="button" id="menu1" data-toggle="dropdown">Applications
 <span class="caret"></span></button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">
 My Apllications</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">
 Staff Board</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Apply
 </a>  
 </li>

 </ul>
 </div>

工作小提琴-http://jsfiddle.net/vashuStrPro/6p0ux8st/

您需要一个位置属性未设置为静态（即相对、绝对或固定）的父元素。下拉列表使用top:100%的绝对位置，因此，如果没有设置位置的父项，则它将使用window元素作为其引用，因此它在页面底部打开。只需设置<ul>的直接父级即可设置位置。

查看更新后的jsfiddle。

相关文章：