javascript - 如何在每个动态宽度中使 bootstrap 4 下拉菜单正好位于父组件下方？

Question

假设我有一个导航栏，并且我用它锁定了导航栏，max-width: 1600px因此margin: 0px auto无论设备占用多少宽度，我的导航栏组件都保留在它的容器中间。但是我在使用下拉菜单时遇到了一个问题，似乎我的下拉菜单总是转到屏幕的最右侧。我已经尝试删除dropdown-menu-right，但它只是让下拉菜单向左移动，有人可以帮我解决这个问题吗？

这就是我现在得到的：

.

这是我期望得到的：

在某些情况下，我尝试将其位置更改为相对，但它使我的布局变得更糟，当我使用绝对时，起初它可以解决问题，但是当我在不同的设备上尝试时，位置正在中断再次

这是我的代码示例：

              <div
                :class="
                  isLalaVoucherMenuActive
                    ? 'dropdown-menu dropdown-menu-right show'
                    : 'dropdown-menu dropdown-menu-right'
                "
              >
                <button class="dropdown-item">
                  <router-link
                    to="/auth/login"
                    :class="
                      isLalaVoucherHomeActive
                        ? 'nav-link active-nav-link'
                        : 'nav-link'
                    "
                    @click.native="toLalaVoucherHome()"
                    >Lala Land</router-link
                  >
                </button>
                <button class="dropdown-item">
                  <span
                    :class="
                      isLalaVoucherHomeActive
                        ? 'nav-link active-nav-link'
                        : 'nav-link'
                    "
                    @click="openPaymentMethod()"
                    style="cursor: pointer"
                    >lala Voucher</span
                  >
                </button>
              </div>

这是我的CSS：

.navbar .dropdown-menu {
  width: 200px;
  position: relative;
  right: -120px;
}

有人可以帮我解决这个问题吗？我对此很困惑

编辑1：

这是我使用时的CSS position: relative：

.navbar .dropdown-menu {
   width: 200px;
   position: relative;
   top: 100px;
   left: -120px;
}

标签： javascripthtmlcss