反应中的引导卡

Question

我正在遭受在反应中实施引导程序的痛苦。我一开始就设置了 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 会覆盖引导程序，所以我修复了它。