Bootstrap 4 通过更改箭头位置防止屏幕外弹出 总结

我想水平移动屏幕外的弹出窗口

闪电战：

背景 我使用的是

ng bootstrap

（用于angular的bootstrap 4小部件）。我的应用程序包含一个包含多个按钮的工具栏。每个按钮都是一个弹出框：单击它，相应的内容将显示在按钮下，如下所示

截图：

问题 但是，左边的弹出窗口在屏幕外。在raw Bootstrap 4中，Popper.js会注意到它并在右侧显示popover。已报告此错误

但我不希望出现这种行为，因为我希望popover保持在工具栏下

我想要的是找到一种方法将popover向右移动，将箭头保持在按钮下方，如下所示：

我通过以下方式更新了popover（

ngb popover窗口

）的CSS：

element.style {
    top: 54px;
    // left: -80px;
    left: 0px !important;
}

这将正确地将popover与其父项对齐（父项是相对的）

截图：

然而：

箭头不在按钮1下方（保持50%宽度）

我只想在popover不在屏幕上时应用此操作（在真正的应用程序中，它取决于宽度为2.5%的工具栏左边距，因此不是固定的px值）

js动态擦除

left:0px！重要的值，即使
！重要信息
被添加并将其设置回计算值

---

检查左侧的popover模式位置是否小于零，在文档加载时将其设为零。使用JS或JQuery。