我想在我一直在努力的項目中的評論部分中添加一個下拉菜單。Bootstrap drop down off off

下拉菜單似乎將自己關閉，我不知道爲什麼是這種情況。我想試試overflow:visible and z-index:999。但他們都沒有工作。

這是我想包括在

下拉基本註釋塊這是我想要的基本代碼來實現

<div class="media"> 
    <a class="pull-left" href="/user/{{shared_scribble.scribble.user.username}}/"><img class="media-object" src="/img.png/"></a> 
    <div class="dropdown pull-right"> 
     <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:10px;padding: 4px 8px;"> 
      <b data-icon="&#xe001;"></b> <b class="caret"></b> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> 
      <li><a href="#"><i class="icon-trash"></i> Delete</a></li> 
      <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> 
      <li class="divider"></li> 
      <li><a href="#"><i class="i"></i> Make admin</a></li> 
     </ul> 
    </div> 
    <div class="media-body"> 
     <h4 class="media-heading"><a class="username" href="/user/hi/">Test User</h4> 
     <p> 
      Main body of the comment 
     </p> 
    </div> 
</div>

這是我的下拉菜單是如何轉證明是

ScreenShot

媒體CSS

.media, 
.media-body { 
    overflow: hidden; 
    *overflow: visible; 
    zoom: 1; 
} 
.media, 
.media .media { 
    margin-top: 15px; 
} 
.media:first-child { 
    margin-top: 0; 
} 
.media-object { 
    display: block; 
} 
.media-heading { 
    margin: 0 0 5px; 
} 
.media .pull-left { 
    margin-right: 10px; 
} 
.media .pull-right { 
    margin-left: 10px; 
} 
.media-list { 
    margin-left: 0; 
    list-style: none; 
}

來源

2013-01-23 Jonathan

哪裏是你的CSS？ – sandeep

@sandeep我已經添加了media css以及 – Jonathan

檢查媒體類是否有overflow:hidden。如果是這樣，請將其替換爲overflow: auto或overflow: visible。

來源

2013-01-23 06:39:52 Gopikrishna

在某些情況下，需要與設計相關的'overflow：hidden'，@Nick Perez答案可以幫助解決這些問題。 –

同意@RoyShoa，這往往是不可能的。找到解決方法在這裏： https://stackoverflow.com/questions/31829312/bootstrap-dropdown-clipped-by-overflowhidden-container-how-to-change-the-conta –

這樣寫：

.media, 
.media-body { 
    overflow: visible; 
} 

.media:after, 
.media-body:after{ 
content:''; 
clear:both; 
display:block; 
}

可能這是幫你。

來源

2013-01-23 09:14:23 sandeep

新方法：

只要把下拉菜單中進行媒體類和使用負保證金：

<div class="dropdown pull-right" style="margin-left:-30px"> 
    ... 
</div> 

<div class="media"> 
    ... 
</div>

來源

2014-07-02 07:54:54 hjahan

這並不像菜單的理想解決方案將不會與目標元素滾動，但我這樣做了滾動數據表作爲最後的手段，直到我能找到一種替代方案：

(function() {            
    var dropdownMenu;          
    $(window).on('show.bs.dropdown', function(e) {   
    dropdownMenu = $(e.target).find('.dropdown-menu'); 
    $('body').append(dropdownMenu.detach());   
    dropdownMenu.css('display', 'block');    
    dropdownMenu.position({       
     'my': 'right top',        
     'at': 'right bottom',       
     'of': $(e.relatedTarget)      
    })             
    });             
    $(window).on('hide.bs.dropdown', function(e) {   
    $(e.target).append(dropdownMenu.detach());   
    dropdownMenu.hide();        
    });             
})();

這將追加菜單身體和清理上隱藏。我正在使用jQuery UI進行定位，但如果您不想添加嚴重的依賴關係，則可以使用常規jQuery定位替換它。如果您只想對有限的下拉選項執行此操作，您可能還想更改$(window).on。

來源

2014-12-30 19:11:00

謝謝尼克的答案..工作對我來說很好。我沒有可以改變隱形溢出的豪華（需要固定高度/寬度） – Bashar

也會喜歡看這個答案更新處理表格滾動 –

很好，謝謝！只需在''我的'：'左上'，''''左下'處將右'改爲'左'，否則菜單將向錯誤的方向打開。 –

在我繼承的項目上經常得到這個;往往是一個的一個有

溢出的父元素的情況：隱藏

一旦我刪除這一點，似乎期望的工作（只要你的設計不依賴於這個屬性）。

來源

2017-03-29 07:36:17 Wellso

我有同樣的問題。添加此行後，我的下拉工作得如我所料：

@media (max-width: 767px) { 
    .table-responsive .dropdown-menu { 
     position: static !important; 
    } 
} 

@media (min-width: 768px) { 
    .table-responsive { 
     overflow: visible; 
    } 
}

我找到了解決辦法here

來源

2017-04-21 19:41:18

謝謝！它在桌面和平板電腦上工作，但定位是iPhone 6 +有點怪異，我改變了最大寬度767px註釋掉的位置和使用左：-100px; ...是的，哈克，但它的作品。 –

Bootstrap drop down off off

媒體CSS

回答

相關問題