如何让Bootstrap下拉菜单的transform: translate属性值随屏幕尺寸动态适配

方案1：复用Bootstrap自带的Popper定位能力（推荐） #

你当前用的是Bootstrap 5框架，原生下拉组件已经依赖Popper.js实现了动态坐标计算、屏幕边界自适应逻辑，不需要自己手写transform赋值，只要给二级下拉触发元素补全Bootstrap要求的属性即可：

• 给「New dropdown」对应的<a>标签添加id、data-bs-toggle="dropdown"、aria-expanded="false"属性
• 给二级下拉的<ul>标签添加aria-labelledby属性，值为触发元素的id

修改后的二级菜单代码示例：

<li class="dropdown-submenu dropdown-item">
  <!-- 补全下拉触发属性 -->
  <a id="subMenuTrigger" class="test dropstart" tabindex="-1" data-bs-toggle="dropdown" aria-expanded="false" data-popper-placement="left-start">
    New dropdown <span class="caret"></span>
  </a>
  <!-- 补全aria-labelledby属性 -->
  <ul class="dropdown-menu dropstart" aria-labelledby="subMenuTrigger" data-popper-placement="left-start">
    <li class="dropdown-item">
      <a tabindex="-1" href="#">2nd level dropdown</a>
    </li>
    <li class="dropdown-item">
      <a tabindex="-1" href="#">2nd level dropdown</a>
    </li>
  </ul>
</li>

配置完成后点击「New dropdown」，Bootstrap会自动给下拉菜单写入适配当前屏幕位置的transform: translate属性，窗口大小变化时也会自动更新坐标。

方案2：手动写jQuery逻辑实现定位 #

如果你需要自定义定位规则，不想用Bootstrap默认行为，可以自己写坐标计算逻辑：

// 监听二级下拉触发按钮点击事件
$('.dropdown-submenu .dropstart').on('click', function(e) {
  e.stopPropagation();
  const $trigger = $(this);
  const $subMenu = $trigger.next('.dropdown-menu');
  // 获取触发元素相对于视口的坐标
  const triggerRect = this.getBoundingClientRect();
  // dropstart样式菜单放在触发元素左侧，计算坐标
  let x = triggerRect.left - $subMenu.outerWidth();
  const y = triggerRect.top;
  // 边界判断：如果超出屏幕左侧，就改成放在触发元素右侧
  if (x < 0) x = triggerRect.right;
  // 写入transform属性
  $subMenu.css({
    'position': 'absolute',
    'inset': 'auto auto 0px 0px',
    'margin': 0,
    'transform': `translate(${x}px, ${y}px)`
  }).toggle();
})

// 监听窗口 resize 事件，屏幕尺寸变化时重新计算位置
$(window).on('resize', function() {
  $('.dropdown-menu.dropstart:visible').prev('.dropstart').trigger('click');
})

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