Twitter bootstrap 如何更改Bootstrap 4弹出框的位置？

我正在尝试将引导4个弹出框对齐到其父按钮的左侧或右侧。我知道我可以通过使用“偏移”来实现它，但这意味着我必须为每个按钮设置不同的偏移值，因为这些按钮的宽度永远不会相同

是否有办法利用popper.js（BS用于定位）来实现对齐，而不是始终将popover居中

---

在对它进行了一段时间的处理之后，我发现我可以通过使用偏移量来实现我想要的，因为它不仅接受像素值，而且还接受相对于父对象的百分比

所以我只是在做：

data-offset="-50%"

---

如果您在这里是因为您想在使用

react bootstrap

时设置偏移量，下面是您的操作方法。通过将

popperConfig

属性添加到

下拉菜单中。菜单

组件：

<Dropdown>
  <Dropdown.Toggle>
    Select Option
  </Dropdown.Toggle>
  <Dropdown.Menu
    popperConfig={{
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, 10],
          },
        },
      ],
    }}>
    <Dropdown.Item>Menu Item 1</Dropdown.Item>
    <Dropdown.Item>Menu Item 2</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

选择选项
菜单项1
菜单项2

---

希望这对其他人有所帮助。

您查看了吗？你也可以在顶部或底部有一个弹出窗口。是的，我已经检查了文档，但它没有回答我的问题。我知道我可以设置popover的侧面，但它仍将始终以该侧面为中心。您应该能够在对齐popover的方向上附加

-start

或

-end

。例如

底部启动

。这就是你想要的吗？这似乎不起作用，它抛出了一个js错误。似乎popper支持这些选项，但BS不支持。这里有一个快速的提琴：它使用的是例如data placement=“bottom”，而不是data placement=“bottom start”。请检查我关于如何使用引导的

-start

和

-end

变体的回答。