0
180
VistasReact-Bootstrap - ¿Cómo crear filas de 4 cartas cada una?
¿Cómo configuro el número de tarjetas por fila? Necesito 4 cartas para estar en una fila mía. Lo he estado intentando durante horas... no puedo entender qué es lo que hago mal... Recibía todo tipo de errores cuando jugaba con esto. como este: aquí
mi archivo package.json: 
¡Gracias! :)
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); me sale este error ahora:
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Para usar el sistema de diseño de arranque, debe usar
<Container>para envolver<Row>y<Col>No necesita estilos personalizados para lograr lo que desea.
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);
·
Juan Pablo Isaza
Denunciar
Responde la pregunta