引导卡在反应

Question

我在React中实现了引导程序。我在一开始就设置了bootstrap4，但是布局不好，然后使用react-bootstrap，出现了同样的问题。卡的主体，标题和按钮会出现在图像本身上enter image description here

import React from 'react';
import { Card, Button } from 'react-bootstrap';



const WorkCard = () => {
    return (
        <div>
            <Card style={{ width: '18rem' }} >
                <Card.Img variant="top" src="holder.js/100px180" />
                <Card.Body>
                    <Card.Title>Card Title</Card.Title>
                    <Card.Text>
                        Some quick example text to build on the card title and make up the bulk of
                        the card's content.
                    </Card.Text>
                    <Button variant="primary">Go somewhere</Button>
                </Card.Body>
            </Card >
        </div>
    )
}

export default WorkCard;

Answer 1

使用sass覆盖了引导程序，所以我解决了这个问题。