Question

我有几个bootstrap行。当用户单击任何行时，弹出窗口应显示在行的中间中并显示一些信息。但是，此刻它在行结束后突然向右移动。

这是我的JSBin链接，显示代码：https://jsbin.com/rogeyufuku/1/edit?css,js,output

我尝试通过将positionLeft设置为负值来重新定位它，如下所示：

<ReactBootstrap.Popover className="my-popover" positionLeft={-300} positionTop={20} >

但这没效果。

我还尝试使用普通的旧CSS规则来操作它，如下所示：

.my-popover { position: relative; left: -200px; }

但这也不起作用。

有没有想法按照我的意愿渲染弹出式叠加？

（包括此处的所有代码以供参考，但JSBin链接正在运行）

编辑：以下是现在的样子：http://i.imgur.com/URuYthN.png 这就是我想要的样子：http://i.imgur.com/M4Hh1wI.jpg

Answer 1

有点难以看到你想要做什么，但你不应该使用positionLeft和positionTop道具，它们将由Overlay组件设置

如果您希望弹出框显示在中间，请使用placement道具和值"top"或"bottom"代替"right"

如果你想要更细粒度地控制它的位置和位置，你需要制作自己的自定义Popover组件，该组件对由覆盖组件传递给它的positionLeft和positionTop组件做一些事情

class MyPopover extends React.Component {
  render(){
    var left = calculateMyOwnLeftPosition()

    return (
      <ReactBootstrap.Popover {...this.props} positionLeft={left}>
        { this.props.children }
      </ReactBootstrap.Popover>
    )
  }
}

然后你就像使用它一样：

<Overlay>
  <MyPopover>sweet content</MyPopover>
</Overlay>

Answer 2

使用 Popover 道具 positionLeft 和 positionTop ：

<Popover
  id="popover-basic"
  placement="right"
  positionLeft={200}
  positionTop={50}
  title="Popover right"
>

但如果你在OverlayTrigger上使用 OverlayTrigger 使用展示位置：

React-Bootstrap Popovers With OverlayTrigger：

const popoverTop = (
  <Popover id="popover-positioned-top" title="Popover top">
    <strong>Holy guacamole!</strong> Check this info.
  </Popover>
);

<OverlayTrigger trigger="click" placement="top" overlay={popoverTop}>
  <Button>Holy guacamole!</Button>
</OverlayTrigger>

定位react-bootstrap popover

2 个答案: