位置引导弹出窗口

Question

我正在尝试实现用于选择语言的弹出框，但是遇到两个问题：

1）当我将position: absolute;应用于页脚时，弹出框隐藏在页脚上方。

2）弹出窗口粘贴在我页面的右侧。我希望在那里有个空白，但是margin-right似乎没有效果。

Here's a jsfiddle。

注意：较新版本的引导程序可能不是这种情况，但是我在网站的其余部分中使用了该引导程序，目前暂时无法迁移到较新版本...

编辑：我通过添加{container: 'body'} to the tooltip解决了第一个问题。第二个仍然开放...

编辑2：我设法使用以下方法添加了margin on the right：

.popover
{
  right: 10px !important;
  left: auto !important;
}

现在唯一的问题是箭头不再位于箭头下方的文本居中...任何提示？

Answer 1

一种实现此目的的方法是在您的position:fixed; right:40px;上添加固定位置#wrapper。这将使您可以向左或向右调整位置。但是，如果尝试调整顶部或底部，它将脱离其父容器并相对于文档。因此，如果您需要调整顶部或底部使用边距。

#wrapper{
  min-height: 50px;
  max-height: 100px;
  display: flex;
  align-items: center;
  position:fixed;
  right:40px;
}