在手风琴的顶部显示引导程序V3.0.3中的下拉菜单

我有手风琴，并在其中创建了一个下拉菜单。在手风琴的顶部显示引导程序V3.0.3中的下拉菜单

下拉菜单显示在最后一个项目的Accordion下。

这是下拉的代码：

<div class="dropdown "> 
<a id="dLabel" role="button" data-toggle="dropdown" 
    data-target="#"> 
    <span class="glyphicon glyphicon-download-alt"></span> 
</a> 
<ul class="dropdown-menu download-dropdown pull-left" role="menu"> 
    <li role="presentation"> 
     <a href="#">Original data</a> 
    </li> 
    <li role="presentation"> 
     <a href="#">Original data</a> 
    </li> 

</ul>

我怎样才能使它出现在手风琴的顶部？

提前致谢。

https://jsfiddle.net/p0cxsfbx/1/

来源

2017-09-25 Mariam AL-Kassar

你能证明你的CSS – M0ns1f

我没有覆盖的手风琴和下拉的类。 –

尝试添加'.dropdown-menu {height：auto！important; max-height：auto！important}' – M0ns1f

充分利用z-index更高的价值。

UPDATE

让您面板的overflowvisible。

.panel .panel-default { 
overflow:visible; 
}

请确保您将另一个自定义类添加到面板上，否则此CSS将影响此CSS分隔的任何页面上的任何面板。

来源

2017-09-25 15:03:11 ProEvilz

我试过了但是它没有工作 –

@ MariamAL-Kassar Then post你的代码作为一个片段或者使用jsFiddle/codepen来重新创建你的页面，这样我们就可以自己看到它 – ProEvilz

@ MariamAL-Kassar我已经更新了我的答案，以'ul'为目标，试试看看是否可行？ – ProEvilz

我们在评论的讨论后，我明白，你有问题时，屏幕尺寸在小型设备@media (max-width:992px){}

所以尝试添加这对你的CSS：

@media (max-width:992px){ 
.dropdown-menu{width:100% !important;right:0!important;} 
}

来源

2017-09-25 15:26:57 M0ns1f

它没有工作:) –

你能否看到我的更新 –

试试这个'.dropdown-menu { position：fixed; top：auto; left：auto; 最小宽度：50px;右：5％}' – M0ns1f

您是否尝试过使用“dropup “而不是包含菜单的div中的”下拉“类？

请检查下面的代码希望它有帮助。

<div class="dropup"> // <<<<changed here 
 
<a id="dLabel" role="button" data-toggle="dropdown" 
 
    data-target="#"> 
 
<span class="glyphicon glyphicon-download-alt"></span> 
 
\t \t </a> 
 
<ul class="dropdown-menu download-dropdown pull-right" role="menu"> 
 
\t \t <li role="presentation"> 
 
\t <a href="#">Original data</a> 
 
\t \t \t \t \t </li> 
 
\t \t \t <li role="presentation"> 
 
\t <a href="#">Original data</a> 
 
\t \t </li> 
 
\t \t </ul> 
 
\t </div>

来源

2017-09-25 16:46:47 AnaGua

在手风琴的顶部显示引导程序V3.0.3中的下拉菜单

回答

相关问题