css - 如何在正常文档流中使用具有相对位置的 Bootstrap 3 弹出框？

Question

我正在尝试使用 Bootstrap 3 弹出框作为插入到正常文档流中的相对定位元素，因此它会下推后续的 DOM 元素。也就是说，我在顶部有一个大图像，然后是一个表格。单击图像时，我希望弹出窗口出现在图像下方，将表单向下推。

我知道弹出窗口通常有一个绝对位置，因为在正常用例中这是有道理的。但是，在我的特定情况下，我希望它相对定位，但仍显示在它所属的元素下方。有没有一种(非hacky)方法来完成这个？

Answer 1

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

.popover {
    position:relative;
}

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