当在 .sticky-top 元素中调用时，弹出窗口会滚动并且某些内容会隐藏

Question

因此，使用 Bootstrap 4，我有一个设置为 .sticky-top 的导航栏。有一个调用弹出框的按钮，在页面滚动一点之前效果很好，然后弹出框内容的顶部被隐藏。

如果它只发生在滚动时，这不会太糟糕。真正的问题是，如果弹出窗口在滚动后打开，内容仍然隐藏。

这里 Fiddle 显示了问题：

最相关的代码：

<div class="sticky-top bg-dark p-2">
    <div class="btn btn-primary" data-toggle="popover" title="More information..." data-content="Isn't there a way to keep the whole popover visible??? The longer the popover content becomes, the more of the content disappears with scrolling. (There does seem to be a maximum cutoff point, but I haven't tried to measure what it is.)" />Button</div>
</div>

有什么办法可以解决这个问题吗？

Answer 1

将 data-boundary="viewport" 添加到弹出框元素。

  <div class="btn btn-primary" data-toggle="popover" data-boundary="viewport" title="More information..." data-content="Isn't there a way to keep the whole popover visible?">Button</div>

https://jsfiddle.net/vfpb7r2d/22/

当在 .sticky-top 元素中调用时，弹出窗口会滚动并且某些内容会隐藏

Popover scrolls and some content is hidden when called within a .sticky-top element

javascript

css

twitter-bootstrap

bootstrap-popover

bootstrap-4