定位 react-bootstrap 弹出框答案

【问题标题】：Positioning react-bootstrap popover定位 react-bootstrap 弹出框
【发布时间】：2015-07-09 22:57:51
【问题描述】：

我有几个引导行。当用户点击任何一行时，应该会在该行的中间出现一个弹出框并显示一些信息。但是，此时它会弹出到最右边，在行尾之后。

这是显示代码的我的 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

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

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

如果您希望弹出框出现在中间，请使用 placement 属性和值 "top" 或 "bottom" 而不是 "right"

如果您想要更精细地控制其定位的位置和方式，您需要创建自己的自定义 Popover 组件，该组件对 Overlay 组件传递给它的 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>

【讨论】：

抱歉没有更清楚。基本上，我想渲染弹出框与当前渲染的完全一样，除了最右边，我希望它在行的中间渲染。我使用了 API 中提供的 positionLeft。请检查我的编辑以查看当前和所需的输出。

【解决方案2】：

使用 Popover 道具 positionLeft 和 positionTop：

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

但如果您使用的是 OverlayTrigger，请在 OverlayTrigger 上使用 placement：

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>

【讨论】：