Reactstrap中的CardImgOverlay

Question

我正在使用React中的Reactstrap的Card组件。

所以我需要的是一个给定的图像作为卡片标题和卡片标题的背景。因此，我参考了文档并使用了CardImgOverlay组件

下面给出的是代码片段

import React, { Component } from 'react'
import { Form, Card, CardTitle, CardText, CardImg, CardImgOverlay, Container, Row, Col } from 'reactstrap'
import './style.css'

class WeatherComponent extends Component{
    render(){
        return(
            <div>
                <Container>
                    <Row>
                        <Col>
                            <Card>
                                <CardImg width="50%" src="assets/images/sunny.jpg" alt="Card image cap" />
                                <CardImgOverlay>
                                    <CardTitle className='text'>Weather</CardTitle>
                                    <CardText className='text'>Summer</CardText>
                                </CardImgOverlay>
                            </Card>
                        </Col>
                    </Row>
                </Container>
            </div>
        )}
}    
export default WeatherComponent

但上面的页面没有正确呈现，我得到的结果是：

​

​

非常感谢解决此问题的解决方案。

Answer 1

导入'bootstrap/dist/css/bootstrap.min.css'；