0

tengo un problema a la hora de mostrar las cartas en el contenedor padre, muestran todas en una fila y se desbordan, lo que quiero obtener son dos filas de 3 cartas cada una, pero no se porque al mostrarlas, se muestran solo en una fila.

Aquí esta el contenedor padre, donde se muestran todas las cartas

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import Card from './Card'; const Home = () => { return (
<div className="container">
  <div className="tituloGestion">
    <p className="h2 text-center">Panel de gestión </p>
  </div>
  <div className="listaCartasGestion row">
    <div className="listaCartas">
      <Card/>
    </div>
  </div>
</div>
) } export default Home;

Aquí esta el contenedor hijo, donde creo las 6 cartas,recorriendo un archivo json que tiene los datos de cada carta

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { useEffect, useState } from "react";
import axios from 'axios';

const Card = () => {
    const [carta, setCarta] = useState([])

    useEffect(() => {
        fetch('../cartas.json')
            .then(response => {
                return response.json();
            })
            .then(data => {
                //console.log(data.cita)
                setCarta(data.cita);
            })
            .catch((err) => {
                console.log(err.message)
            });
    }, []);

    const renderCard = (card, index) => {
        if (carta.length) {
            return (
                // Array.from(carta).forEach((card) => {
                //     return (
                //         console.log(card)

                <div style={{width:"14rem"}} className="card col-md-4" key={index} >
                    <img
                        src={card.imagen}
                        alt={card.nombre}
                        className="card-img py-3 px-3"
                    />
                    <div className="card-body">
                        <p className="card-title">{card.descripcion}</p>
                    </div>
                    <div className="card-footer text-center fs-3">
                        <Link to={card.nombre} className="text-dark">{card.nombre}</Link>
                    </div>
                </div>
            )
        }
        //     )
        // }
    }
    return <div className='app grid col-md-12'>{carta.map(renderCard)}</div>
}
export default Card;

Aquí podéis ver como quedan las cartas

introducir la descripción de la imagen aquí

4
  • podrias compartir el css de las clases .listaCartasGestion, .row y .listaCartas? Y te consulto, vos queres mostrar las tres primeras cartas en una fila, y las otras tres en otra. Cada card (o las tres en conjunto) tiene un ancho minimo o maximo?
    – Agustin G.
    Commented el 30 dic. 2022 a las 12:50
  • es bootstrap, no tengo css Commented el 30 dic. 2022 a las 13:02
  • bueno pero si no le indicas con CSS a las cards como deben comportarse, se van a comportar de la manera por defecto. getbootstrap.com/docs/4.0/utilities/flex
    – Agustin G.
    Commented el 30 dic. 2022 a las 13:33
  • pero para eso le digo que el contenedor se comporte como un grid, yq que sea en columnas, lo que no entiendo es porque no se desborda, debería una vez pasado el limite desbordarse Commented el 30 dic. 2022 a las 13:51

1 respuesta 1

1

Lo que pasa es que tu contenedor padre no tiene la clase row, Boostrap tiene un sistema de grillas que funcionan de la siguiente forma:

El contenedor padre debe tener la clase row y este consta de 12 "columnas", y los elementos hijos deben tener la clase col.

En tu caso

Por ejemplo, en tu caso, que quieres tener una fila con 3 tarjetas deberias usar el contenedor padre con la clase row, las tarjetas con la clase col-3, tambien lo que veo que puede estar causando problemas es que hay un div, entre el contenedor padre (row) y sus elementos hijos con la clase col (las cards) y por ultimo. No uses estilos en linea para darme ancho a tus elementos porque no tiene sentido cuando se usa las grillas de boostrap ademas que rompe la maquetacion, deberias dejarlo de la siguiente forma:

<div className="listaCartasGestion row">
   <Card/>//componente card con la clase col-3
</div>

Esto es debido a que como dije anteriormente contenedor padre tiene de 12 "columnas", entonces si usas 4 columnas por cada elemento col-3+col-3+col-3 =12 esto quiere decir que los elementos se van a mantener el una fila hasta que lleguen a las 12 columnas, y recien ahi van a dar el salto de linea

Te pongo otro ejemplo, supongamos que quieres solo tener dos cards por fila, debes crear tu contenedor padre con la clase row y adentro tener las cards con la clase col-6, esto quiere decir col-6+col-6 = 12

Esta es la documentacion de Gryd system de bootstrap, revisala bien porque hay distintas clases que te serviran en el rema de responsive, por ejemplo col-md-12, col-sm-12, y col-lg-12 dependiendo el tipo de pantalla. Espero te sirva

1
  • solucionado era eso, tenia un medio potaje ahÍ xDDD, muchas gracias Commented el 30 dic. 2022 a las 14:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.