25

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

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

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

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

谢谢斯蒂芬

4

4 回答 4

79

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

我变了：

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

至：

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

它正在工作。

container: 'body'

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

谢谢

斯蒂芬

于 2013-08-15T19:19:46.913 回答
0

我通过在我自己的 css 中覆盖 carousel-inner 来解决它。增加高度以显示下拉

.carousel-inner {height: 350px; width: 100%; min-width: 650px;}
于 2014-05-29T15:12:30.727 回答
0

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

.carousel-inner{
    overflow:visible;
 }

我希望这可以帮助别人。

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

于 2014-01-23T06:10:46.807 回答
0

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

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

这就是使用内容发生的事情：“body” 在此处输入图像描述

这就是使用边界的外观：“视口” 在此处输入图像描述

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

正如您在官方文档中看到的边界有不同的选项，默认为“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>"
});
于 2021-08-05T16:40:38.757 回答