2

React - Bootstrapでオーバーレイ トリガーを使用してポップオーバーを実装しようとしています。

このように見えるはずです

このコードを使用して実装しました：

var {Button, Overlay, OverlayTrigger, ButtonToolbar, Popover} = require('react-bootstrap');

...
<ButtonToolbar>
<OverlayTrigger trigger="click" placement="left" overlay={<Popover title="Popover left"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
  <Button bsStyle="default">Holy guacamole!</Button>
</OverlayTrigger>
</ButtonToolbar>

Inspect-Element を使用してそれらを比較しました。.popover要素を調べたときに、実装用のスタイリングがないことに気付きました。また、元pseudo ::afterのコンポーネントの直後に要素がありarrowます（反応ブートストラップWebサイトの例）。その::afterコンポーネントも私の実装にはありません。スタイルが台無しになっている/上書きされている理由がわかりません。次の行に従って、私が思うすべてを正しく含めています。

var {Button, Overlay, OverlayTrigger, ButtonToolbar, Popover} = require('react-bootstrap');

結局、私の実装ではポップオーバーの小さな矢印が見えません。なぜ::after消えているのですか？実装で小さな矢印 (三角形の css) を表示するにはどうすればよいですか?

4

3 に答える 3

0

使用する反応ブートストラップは、正しく機能するためにプレフィックスを付ける必要があります。だから、react-bootstrap と prefix popover, arrow, with bt3-prefix に入る必要がありました。その後、すべてのスタイルがインポートされました。

于 2015-11-19T23:20:51.817 に答える