如何更改 Bootstrap 4 弹出框的位置？答案

【问题标题】：How can I change the position of Bootstrap 4 popovers?如何更改 Bootstrap 4 弹出框的位置？
【发布时间】：2023-03-07 10:42:02
【问题描述】：

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

有没有办法利用 popper.js（BS 用于定位）来实现对齐，而不是始终居中弹出框？

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

【问题讨论】：

你检查过docs吗？您还可以在顶部或底部设置一个弹出窗口。
是的，我检查了文档，但没有回答我的问题。我知道我可以设置弹出框的一侧，但它仍将始终以该侧为中心。
您应该能够将-start 或-end 附加到对齐弹出框的方向。前任。 bottom-start。这就是你要找的东西吗？
这似乎不起作用，它抛出了一个js错误。似乎popper支持这些选项，但BS不支持。这是一个快速的小提琴：codepen.io/ivomynttinen/pen/eeoORa 正在使用例如。 data-placement="bottom"，但不是 data-placement="bottom-start"。

标签： twitter-bootstrap bootstrap-4 popper.js

【解决方案1】：

如果您在这里是因为您想在使用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>

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

【讨论】：

【解决方案2】：

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

所以我只是在做：

data-offset="-50%"

【讨论】：

【解决方案3】：

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

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

【讨论】：