Question

当我尝试按下某个奇怪的原因，当它点击下拉菜单显示在页面上时，我甚至无法在我的实际网站中看到它，但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>

感谢您的帮助。

Answer 1

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

查看updated jsfiddle。

Answer 2

您的代码中存在一些问题。例如缺少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/

Bootstrap下拉列表未正确显示

2 个答案: