我的项目的 Bootstrap 。 我的 JavaScript 代码如下:
<OverlayTrigger trigger="click" placement="right" overlay={<Popover ><strong>Gender: </strong>Please select your gender</Popover>}>
<input className="col-sm-1 col-xs-1" type="radio" name="gender" value="Male" checked={this.state.gender ==="Male"} onChange={this.onRequiredGender} disabled={this.state.maleDisable} />
</OverlayTrigger>
单击单选按钮为我提供了 Popover,但该 Popover 的位置就在该单选按钮旁边。
我尝试过CSS:
.popover .right{
left: 400px
}
甚至使用 React-bootstrap positionLeft={400}
类似于以下内容:
<OverlayTrigger trigger="click" placement="right" overlay={<Popover positionLeft={400} ><strong>Gender: </strong>Please select your gender</Popover>}>
<input className="col-sm-1 col-xs-1" type="radio" name="gender" value="Male" checked={this.state.gender ==="Male"} onChange={this.onRequiredGender} disabled={this.state.maleDisable} />
</OverlayTrigger>
弹出窗口的静止位置与单选按钮的位置相同。
如果有人可以帮助我改变 Popover 的给定位置,那就太好了。
提前致谢..
最佳答案
问题是您尝试使用的 positionLeft
属性已被 OverlayTrigger
覆盖,您不应该使用它。但是,如果您想更好地控制 Popover
元素,我建议您创建自己的 popover 组件
,它可以对 positionLeft
和 执行某些操作由
组件。 Overlay 组件
传递给它的positionTop
class CustomPopover extends React.Component {
render(){
return (
<ReactBootstrap.Popover {...this.props} positionLeft={400}>
{ this.props.children }
</ReactBootstrap.Popover>
)
}
}
你可以像这样使用它
<Overlay>
<CustomPopover><strong>Gender: </strong>Please select your gender</CustomPopover>
</Overlay>
这是 github 上的一个问题:https://github.com/react-bootstrap/react-bootstrap/issues/816 。检查一下。
关于javascript - 使用react-bootstrap在overlaytrigger中弹出框的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38436645/