我想在我一直在努力的项目中的评论部分中添加一个下拉菜单。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

回答

相关问题