Javascript 如何防止或禁用Bootstrap 4 popover自动定位行为（自调整行为）

我在我的项目中使用Bootstrap4框架，并根据我的需求使用popover。当我使用popover时，我注意到当视口从纵向更改为横向时，popover本身会自动调整位置

popover有一个固定的高度，我已经将数据放置为底部。 当从纵向切换到横向时，它可以自动调整位置并切换到顶部位置

我的要求是，我需要在所有屏幕和视口中将popover放置为底部，并希望防止其从底部到顶部的自我调整行为

在调查该问题时，我发现该高度超出了视图端口高度，因此导致了该问题

任何帮助或解决方案都将不胜感激。提前谢谢

Link : `https://jsbin.com/paladipepi/1/edit?html,css,js,output`

复制步骤：

1打开链接https://jsbin.com/paladipepi/1/edit?html，css，js，输出，在Chrome浏览器中输出

2打开emulator并选择任何移动设备iPhone6/iPhoneX，然后单击弹出窗口

3切换到横向模式

预期结果：应放置为底部

实际结果：自动调整到顶部位置

代码

$function{ $'[data toggle=popover]'。popover{ 触发器：“焦点” } } .分目{ 位置：粘性； } .popover车身{ 高度：340px； } JS-Bin

---

Popover基于popper.js。位置被定义为“底部”，但无论何时在iphone横向模式下看到它，popover都没有空间在底部位置显示它，因为它的高度为340px，因此强制它从顶部渲染此行为是正确的。现在，根据您的要求，您可以尝试在iphone环境中删除.popover body的高度，或者使用媒体查询将其降低，并将高度设置为html和body的100%

---

希望对你有帮助

万岁

找到解决办法了吗

---

在Bootstrap Popover选项中将fallbackpament设置为['left'，'right'，'top'，'bottom']

Link: https://popper.js.org/popper-documentation.html#modifiers..flip.behavior

<script>
    $(function() {
        $('[data-toggle="popover"]').popover({
            container: '.subheader',
            fallbackPlacement : ['left', 'right', 'top', 'bottom']
        })
    })
</script>

---

只需将容器和边界设置为body，同时将所有后备位置设置为body

$function{ $'[data toggle=popover]'。popover{ 触发器：“焦点”， 容器：'主体'， 边界：'主体'， 下降水泥：['bottom'，'bottom'，'bottom'，'bottom'] } }

---

将下降方向设置为“逆时针”，并将容器定位为“相对”

$('[data-toggle="popover"]').popover({
        container: '.container',
        html: true,
        trigger:'manual',
        fallbackPlacement: 'counterclockwise'
    })

---

嗨@RachelGallen谢谢你的回复。用代码更新。请看一看情况如何？现在这个问题看起来好多了：我建议使用px以外的东西来调整它的大小，可能是一个带相对位置的%高度或/和设置边距，这样它的顶部和底部是相同的-垂直对齐中间可能会起作用，尽管在我的经验中它很少起作用！！。棘手的请务必解决像素问题，谢谢您的支持：祝你今天愉快嗨，RacelGallen。我得到了答案嗨@Kunal是的，我尝试了这些可能性，通过降低高度和添加overflow-y:scroll到popover主体，同时使用jquery切换到横向，效果很好！！！！但这是客户的要求，我不能改变。有没有其他可能的方法来防止这种行为？我不认为有任何其他的解决办法来做到这一点。因为在电话里，事情需要调整。在414px的窗口中，我们无法将高度保持在340px。但我们可以将主体内容向右滚动。。？popover应滚动显示固定位置的正文内容。这是一个可能的解决办法。我试过了，但没能实现。是的，这可能是这个场景中唯一的解决方案。但我不这么认为，这将是可能的引导。您可以尝试使用一些外部jquery库，例如：“tooltipster”。那可能会有帮助！！！我可以用popper.js自己来做。我已经使用popper.js创建了一个新的popover，我已经建议了这些选项，但是客户需要防止自调整引导4行为。有可能吗？谢谢Rachel:在属性形式中：数据回退位置=“[左、右、上、下]”