如何在 React 组件中使用 Bootstrap 网格？

Question

我想在同一行中至少获得 2 张卡片，但由于数据是一张一张映射的，我不知道该怎么做。我正在使用名为 'Content' 的自定义组件并在此处返回数据

import React from "react";
import { Card, CardGroup, Col, Row } from "react-bootstrap";
import { ListGroup, ListGroupItem } from "react-bootstrap";
const Content=({name, image, type, vegan, cuisines})=>{
    
    return(
        <div>
        <CardGroup>
        <Col xs={12} sm={6} md={4} lg={4}>
            <Card>
                <Card.Img variant="top" src={image} />
                <Card.Body>
                    <Card.Title>{name}</Card.Title>
                    <Card.Text>
                        <ListGroup>
                            <ListGroupItem>Type: {type}</ListGroupItem>
                            <ListGroupItem>Vegan: {vegan}</ListGroupItem>
                            <ListGroupItem>Cuisines: {cuisines.cuisines.join(", ")}</ListGroupItem>
                        </ListGroup>
                    </Card.Text>
                </Card.Body>
            </Card>
        </Col>
        </CardGroup>
          </div>
    )
}
export default Content

Answer 1

我相信您没有使用 Row 组件来换行。
尝试将 <CardGroup> 替换为 <Row>，如图 in this section of the docs.

如何在 React 组件中使用 Bootstrap 网格？

How do I use Bootstrap grid with components in react?

twitter-bootstrap

reactjs

react-bootstrap