如何在普通文档流程中使用Bootstrap 3 popover和相对位置？

Question

我尝试使用Bootstrap 3 popover作为插入普通文档流中的相对定位元素，因此它会推送后续DOM元素。也就是说，我在顶部有一个大图像，然后是一个表格。单击图像时，我希望弹出窗口显示在图像下方，然后按下窗体。

据我所知，popovers通常具有绝对位置，正如在正常用例中这是有道理的。但是，在我的特定情况下，我希望它相对定位，但仍然出现在它所属的元素下面。是否有（非hacky）方法来实现这一目标？

Answer 1

您可以使用简单的CSS覆盖Bootstrap的position:absolute ..

.popover {
    position:relative;
}

演示：http://www.bootply.com/129257

Answer 2

你必须使用popover吗？看起来你可以通过折叠组件更好地服务：http://getbootstrap.com/javascript/#collapse

如果你绝对不能使用Bootsrap，jQuery的slideToggle功能也可以完成你正在寻找的东西：https://api.jquery.com/slideToggle/