4

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

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

4

2 回答 2

2

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

如果您希望弹出框出现在中间，请使用placementprop 和 values "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>
于 2015-07-10T19:30:41.653 回答
2

使用Popover道具positionLeft和positionTop：

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

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

使用 OverlayTrigger的 React-Bootstrap弹出框：

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>
于 2016-11-18T20:03:29.840 回答