显示带有溢出的 div 外部的引导弹出窗口：隐藏答案

【问题标题】：display bootstrap popovers outside divs with overflow:hidden显示带有溢出的 div 外部的引导弹出窗口：隐藏
【发布时间】：2013-08-14 05:16:43
【问题描述】：

我有一个关于如何让引导弹出窗口显示在滑块上方（外部）的问题，该滑块有一个溢出包装：隐藏，我似乎无法绕过。

我正在使用这个滑块：http://owlgraphic.com/owlcarousel/ 我也在使用 Twitter bootstrap 2.3.2 弹出框：http://getbootstrap.com/2.3.2/javascript.html#popovers

除了溢出：隐藏在轮播之外，两者都可以很好地协同工作，这类似于以下问题： Popovers in Bootstrap 2.2.1 https://github.com/twbs/bootstrap/issues/6122

我的具体问题是：有没有人让这个工作？我已经做了一些高度和负边距的移动以显示垂直高度，但如果弹出框位于我的包裹潜水的边缘，它将在边缘被切断。如果我需要提供任何其他详细信息，请告诉我。

谢谢斯蒂芬

【问题讨论】：

标签： css twitter-bootstrap popover

【解决方案1】：

好的，所以我想出了这个。

我变了：

$('.popover-with-html').popover({ html : true, });

到：

$('.popover-with-html').popover({ html : true, container: 'body'});

它正在工作。

container: 'body'

是关键，我希望这对某人有所帮助。

谢谢

斯蒂芬

【讨论】：

我有一个与引导程序的下拉菜单类似的问题，但是容器选项不可用。
“不可用”是什么意思？
谢谢斯蒂芬妮！适用于 Bootstrap 3.3.3 和 Owl Carousel 2 Beta。用引导工具提示解决了我的问题
这似乎不适用于 Bootstrap 4.0 和 Owl Carousel

【解决方案2】：

在您的 CSS 中添加以下内容。覆盖滑块的溢出属性。

.carousel-inner{
    overflow:visible;
 }

我希望这对某人有所帮助。

从https://github.com/twbs/bootstrap/issues/6091得到它

【讨论】：

【解决方案3】：

我通过在我自己的 css 中覆盖 carousel-inner 解决了这个问题。增加高度以显示下拉菜单

.carousel-inner {height: 350px; width: 100%; min-width: 650px;}

【讨论】：

【解决方案4】：

对于其他在 2021 年使用较新版本的引导程序遇到此问题的人，解决方案是使用“边界”参数，因为“容器”似乎不起作用。

我必须在使用AdminLTE 制作的侧边栏中实现一个弹出框

这就是使用 content:"body" 时发生的事情

这是使用边界的外观：“viewport”

如果没有激活此选项，Popper fallbackPlacement 将接管并翻转弹出方向（默认放置为“右”）

正如您在official documentation 边界中看到的那样，有不同的选项，默认为“scrollParent”，但您可以像在这种情况下使用“viewport”或“window”

本例中使用的代码：

$("#registerPetPopover").popover({
    placement:"right", //Default parameter
    title:"Registra un pet!", //Popover Title
    html:true, //Enable HTML inside popover
    trigger:"manual", //Avoid activating the popover while clicking
    boundary:"viewport", //Allow the popover to go outside its parent
    content:"<div class='text-right'>Clicca qui per registrare il tuo primo pet!<br><a href='#'>Non mostrare più</a><div>"
});

【讨论】：