Bootstrap 下拉列表被 overflow:hidden container 截断，如何更改容器？

Question

使用引导程序，我在 div 中有一个下拉菜单（ s ）和 overflow:hidden ，它需要像这样。这导致下拉菜单被容器剪裁。

我的问题是，我该如何解决这个裁剪问题，例如，将项目中所有下拉菜单的容器更改为 body ，尽可能降低成本？

这是代码示例：http: //jsfiddle.net/0y3rk8xz/

原文由 AlBaraa Sh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果有人对此解决方法感兴趣，bootstrap dropdown 有一个 show.bs.dropdown 事件，您可以使用该事件将下拉元素移到 overflow:hidden 容器之外。

 $('.dropdown').on('show.bs.dropdown', function() {
  $('body').append($('.dropdown').css({
    position: 'absolute',
    left: $('.dropdown').offset().left,
    top: $('.dropdown').offset().top
  }).detach());
});

还有一个 hidden.bs.dropdown 事件，如果你希望在下拉列表关闭后将元素移回它所属的位置：

 $('.dropdown').on('hidden.bs.dropdown', function() {
  $('.bs-example').append($('.dropdown').css({
    position: false,
    left: false,
    top: false
  }).detach());
});

这是一个工作示例：

http://jsfiddle.net/qozt42oo/32/

原文由 Varol 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将 div 属性更改为 overflow:visible; ，或在 .dropdown 类上设置 Position:absolute;

 .bs-example .dropdown{position:absolute;}

请参阅工作代码：http: //jsfiddle.net/guruWork/3x1f8ng5/

原文由 Guru 发布，翻译遵循 CC BY-SA 3.0 许可协议