如何實現 React-Bootstrap？

Question

我正在嘗試對我的應用程序實施 React-Bootstrap，但它無法以某種方式呈現。

這是我試過的代碼：

import React from 'react';

import { CardGroup, Card, Button, Container, CardImg, ListGroup, ListGroupItem, Row, Col } from 'react-bootstrap';

export class MovieView extends React.Component {
  render() {
    const { movie, onBackClick } = this.props;
    return (
      <Container>
        <Row>
          <Col>
            <CardGroup>
              <Card>
                <CardImg className="movie-view movie-poster" src={movie.ImagePath} />
                <Card.Body>
                  <Card.Title className="movie-title value">{movie.Title}</Card.Title>
                  <Card.Text className="movie-description value">{movie.Description}</Card.Text>
                </Card.Body>
                <Card.Body>
                  <ListGroup>
                    <ListGroupItem className="movie-genre">{movie.Genre.Name}</ListGroupItem>
                    <ListGroupItem className="movie-director">{movie.Director.Name}</ListGroupItem>
                  </ListGroup>
                  <Button variant="Primary" onClick={() => { onBackClick(null); }}>
                    Back
                  </Button>
                </Card.Body>
              </Card>
            </CardGroup>
          </Col>
        </Row>
      </Container>
    );
  }
}

Answer 1

如果沒有，請嘗試在您的 src/index.js 或 App.js 文件中添加這一行

import 'bootstrap/dist/css/bootstrap.min.css';

請參閱 此文檔