如何更改 Bootstrap 4 个弹出窗口的位置？

Question

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

有没有什么方法可以利用 popper.js（BS 用于定位）来实现对齐，而不是始终使弹出窗口居中？

For reference, this is the result I'm looking for

Answer 1

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

所以我只是在做：

data-offset="-50%"

Answer 2

如果您在这里是因为您想在使用 react-bootstrap 时设置偏移量，下面是您的操作方法。通过将 popperConfig 属性添加到 Dropdown.Menu 组件：

<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>

希望这对那里的人有所帮助。

Answer 3

@Oyalhi 的回答让我想到了以下想法：如果 Bootstrap 允许 'popperConfig' 属性，您还可以使用 'placement' 提供的选项 popper.js。事实上：以下代码适用于我使用 jQuery 和 Bootstrap 的弹出窗口 4. 在构建工具提示时，初始位置 'top' 被 'top-start' 覆盖。但是，您可能需要引入自己的 .css，因为 Bootstrap 没有为此展示位置提供样式。

$('#myElement').popover({
    placement: 'top', 
    content: "some random text",
    popperConfig: {
        placement: 'top-start'
    }
});

如何更改 Bootstrap 4 个弹出窗口的位置？

How can I change the position of Bootstrap 4 popovers?

twitter-bootstrap

bootstrap-4

popper.js