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

Popover props 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 に答える