Bootstrap下拉列表受溢出：隐藏容器的限制，如何更改容器？

Question

使用自举，我有一个下拉菜单（ 小号 内）div用overflow:hidden，这是需要这样。这导致下拉菜单被容器裁剪。

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

Answer 1

如果有人对此有兴趣的解决方法，则引导程序下拉列表具有 _show.bs.dropdown_事件，您可以使用该事件将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());
});