如何根据窗口宽度动态调整Bootstrap Popover的位置？

当然可以实现这个需求！你当前的代码已经抓住了核心逻辑——通过判断窗口宽度来返回不同的placement值，但还有个小细节可以优化：当用户调整窗口大小时，已经显示的popover不会自动更新位置，咱们可以补充窗口resize事件的监听来完善这个功能。

你的初始思路是对的，我帮你把代码优化了一下，同时补上窗口尺寸变化时的位置更新逻辑：

// 先把目标元素存为变量，减少重复DOM查询
const $popoverEl = jQuery('#monthly-expenses');

// 初始化Popover
$popoverEl.popover({
  content: jQuery('#monthly-expense-datails'),
  placement() {
    // 用三元运算符简化判断逻辑
    return jQuery(window).width() <= 992 ? 'top' : 'left';
  },
  html: true,
  trigger: 'manual'
});

// 监听窗口resize事件，实时更新Popover位置
jQuery(window).on('resize', function() {
  // 只有当Popover当前处于显示状态时，才更新位置
  const popoverInstance = $popoverEl.data('bs.popover');
  if (popoverInstance && popoverInstance._isShown) {
    // 先隐藏再重新显示，触发placement函数重新计算位置
    $popoverEl.popover('hide').popover('show');
  }
});

几个需要注意的点： #

• 这个方案适用于Bootstrap 3及以上版本，这些版本都支持在placement选项中传入动态计算的函数
• 如果你的Popover不是用manual触发（比如click或hover），可以调整监听逻辑，比如在触发事件时重新确认位置
• 把目标元素存为变量是个小技巧，能避免每次查询DOM带来的性能损耗

内容的提问来源于stack exchange，提问作者user1692333