React-Bootstrap中的Popover样式未应用于我的组件。
问题描述:
我试图在React-Bootstrap中实现Popover with overlay trigger。React-Bootstrap中的Popover样式未应用于我的组件。
It is supposed to look like this
我实现它使用此代码:
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>
我使用检查-元素进行了比较。我注意到,当我检查元素时,没有任何.popover
样式适用于我的实现。此外,在原始文件arrow
组件后面有一个pseudo
::after
元素(反应引导程序网站中的示例)。我的实现中也缺少那个::after
组件。我不确定为什么这种风格会被搞乱/覆盖。我正确地包含了我认为正确的所有内容:
var {Button, Overlay, OverlayTrigger, ButtonToolbar, Popover} = require('react-bootstrap');
最后,在我的实现中,我看不到Popover的小箭头。为什么::after
消失?我怎样才能使我的实现中可见的小箭头(三角形CSS)?
答
我们使用的反应引导程序需要按顺序前缀才能正常工作。所以我需要进入反应引导程序,前缀为popover
,arrow
,前缀为bt3-
。然后所有样式都被导入。
我面临同样的问题。你能否详细说明你的答案,多一点。 –
Sam在这里。 @SutikshanDubey。你能否详细说明一下? –