在手風琴的頂部顯示引導程序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中的下拉菜單

回答

相關問題