Reaction-Bootstrap-如何创建每行4张卡片？ [英] React-Bootstrap - How to create rows of 4 cards each?

问题描述

如何设置每行的卡数？我需要4张牌才能排成一排。 我已经试了好几个小时了。我不知道我做错了什么。 当我玩这个游戏时，我收到了各种各样的错误。 就像这个： here

我的Package.json文件：

谢谢！ ：)

import { React } from 'react';
import { Card, Button, CardGroup } from 'react-bootstrap';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';


const MyDishes = props => {
    const { dishes } = props;

    return (
        <CardGroup style={{display: 'flex', flexDirection: 'row'}}>
            {dishes.length > 0 &&
                dishes.map(d => (
                    <Row xs={1} md={2} className="g-4">
                    {Array.from({ length: 4 }).map((_, idx) => (
                    <Col>
     
                    <Card key={d.id} style={{ width: '100em' }} style={{flex: 1}}>
                        <Card.Img variant="top" src={d.attributes.picture} />
                        <Card.Body>
                            <Card.Title>{d.attributes.name}</Card.Title>
                            <Card.Text>Possibly some text here</Card.Text>
                            <Link to={`/dishes/${d.id}`}>
                                <Button variant="primary">Full Recipe</Button>
                            </Link>
                        </Card.Body>
                    </Card>
                    </Col>
                ))}
                </Row>
        </CardGroup>
    );
};

const mapStateToProps = state => {
    return {
        dishes: state.myDishes
    };
};

export default connect(mapStateToProps)(MyDishes);

我现在收到此错误：

推荐答案

1. 若要使用引导布局系统，必须使用<Container>换行<Row>和<Col>

2. 您不需要自定义样式即可实现您想要的效果。

import { React } from 'react';
import { Container, Card, Button, CardGroup } from 'react-bootstrap';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';


const MyDishes = props => {
    const { dishes } = props;

    return (
        <Container>
            {dishes.length > 0 &&
                dishes.map(d => (
                    <Row xs={1} md={2} className="g-4">
                    {Array.from({ length: 4 }).map((_, idx) => (
                    <Col>
                    <Card key={d.id}>
                        <Card.Img variant="top" src={d.attributes.picture} />
                        <Card.Body>
                            <Card.Title>{d.attributes.name}</Card.Title>
                            <Card.Text>Possibly some text here</Card.Text>
                            <Link to={`/dishes/${d.id}`}>
                                <Button variant="primary">Full Recipe</Button>
                            </Link>
                        </Card.Body>
                    </Card>
                    </Col>
                ))}
                </Row>
              ))}
        </Container>
    );
};

const mapStateToProps = state => {
    return {
        dishes: state.myDishes
    };
};

export default connect(mapStateToProps)(MyDishes);

这篇关于Reaction-Bootstrap-如何创建每行4张卡片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！