react-bootstrap react-popper在右对齐链接下未对齐

Question

我正在使用版本：

react@16.8.6
react-bootstrap@1.0.0-beta.8

我有一个带有正确理由的表格，忘记了密码href链接：

<Form>
...
  <a href="https://www.google.com" className="d-flex justify-content-end" target="_blank">Forgot Password?</a>
</Form>

我已经用OverlayTrigger包围了它，以使链接的悬停弹出窗口：

const forgotPasswordPopper = (
  <Popover id="popover-basic" title="Forgot Password">
    Please enter a value for username and click this link to start the forgot password processing.
  </Popover>
);

<OverlayTrigger placement="left" delay={{ show: 250, hide: 400 }} overlay={forgotPasswordPopper} >
  <a href="https://www.google.com" className="d-flex justify-content-end" target="_blank">Forgot Password?</a>
</OverlayTrigger>

除弹出器与链接未对齐之外，弹出器工作得很好：

我尝试将其移入和移出表格。

我尝试更改className来更改对齐方式。

我尝试将其放入具有各种className的Div中。

我的下一步是使用Flexbox缩小链接的大小，以期解决此问题。还有其他想法吗？