0

Estoy trabajando con una app de venta de cosas para el hogar desde react. Tengo mi array de productos en un json local y en un componente, hago el destructuring de las props para ver los productos en cards. Mi objetivo es con css poder hacer que queden las cards una al lado de la otra, asi que utilice el float left. Las primeras 7 filas quedan bien pero despues me quedan dos cards en la derecha y la izquierda vacia, debajo una fila de 4 cards correctamente pero abajo de vuelta dos cards, esta vez hacia la izquierda. Yo necesitaria que me queden 9 filas de cuatro cards, probe con distintas propiedades, tambien con float right pero sigue pasando lo mismo. Muestro mi codigo:

    <div className='card-box'>
        <div className='card'>
            <img className='card-img' alt='producto' src={image}></img>
            <div>
                <h6 className='card-name'>{name}</h6>
                <p className='card-price'>${price}</p>
                <div  className='box-count'>
                <ItemCount stock={stock} cantidades={tomarCantidad}/>
                <div className='box-count-onadd'>
                <button  onClick={onAdd}>Agregar al carrito</button>
                </div>
                </div>
                <p className='card-details'><Link to={`/productos/${name}/${id}`} className='card-link'>Ver detalles</Link></p>
            </div>
        </div>
    </div>



    .card-box{
font-family: 'Montserrat', sans-serif;
    }

    .card{
max-width: 15rem;
margin: 1rem;
float: left;
border: none;
margin-left: 4.5rem;
    }

    .card-img{
max-height: 15rem;
max-width: 15rem;
    }

    .card-price{
text-align: center;
font-weight: bold;
    }

    .card-name{
justify-content: center;
font-size: 13px;
margin-top: 0.8rem;
text-align: center;
    }

    .card-link{
margin-left: 4.5rem;
font-size: 15px;
color: black;
font-weight: bold;
text-decoration: none;
    }

    .card-link:hover{
  color: black;
    }

    .card-details{
position: relative;
    }

    .card-details::after{
content: '';
position: absolute;
width: 38%;
height: 1px;
bottom: 0;
left: 70px;
right: 0;
background-color: #937653;
transform: scaleX(0);
transform-origin: bottom left;
transition: transform 0.3s ease-out;
    }

    .card-details:hover::after{
transform: scaleX(1);
transform-origin: bottom left;
    }

2 respuestas 2

0

te falta añadirle el contenedor luego la fila en la que van las columnas y por ultimo el espacio de las columnas, como usas bootstrap, con los breakpoint es mucho mas fácil, aqui te muestro un ejemplo de como quedarían cada una, en tu caso quita las tres repetidas, y añade un bucle, dentro del bucle a partir de la clase row, lo metes dentro y según cuanta información tengas te debería de salir

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-3">
        <div className='card-box'>
        <div className='card'>
            <img className='card-img' alt='producto' src={image}></img>
            <div>
                <h6 className='card-name'>{name}</h6>
                <p className='card-price'>${price}</p>
                <div  className='box-count'>
                <ItemCount stock={stock} cantidades={tomarCantidad}/>
                <div className='box-count-onadd'>
                <button  onClick={onAdd}>Agregar al carrito</button>
                </div>
                </div>
                <p className='card-details'><Link to={`/productos/${name}/${id}`} className='card-link'>Ver detalles</Link></p>
            </div>
        </div>
    </div>
      </div>
   <div class="col-3">
        <div className='card-box'>
        <div className='card'>
            <img className='card-img' alt='producto' src={image}></img>
            <div>
                <h6 className='card-name'>{name}</h6>
                <p className='card-price'>${price}</p>
                <div  className='box-count'>
                <ItemCount stock={stock} cantidades={tomarCantidad}/>
                <div className='box-count-onadd'>
                <button  onClick={onAdd}>Agregar al carrito</button>
                </div>
                </div>
                <p className='card-details'><Link to={`/productos/${name}/${id}`} className='card-link'>Ver detalles</Link></p>
            </div>
        </div>
    </div>
      </div>
 <div class="col-3">
        <div className='card-box'>
        <div className='card'>
            <img className='card-img' alt='producto' src={image}></img>
            <div>
                <h6 className='card-name'>{name}</h6>
                <p className='card-price'>${price}</p>
                <div  className='box-count'>
                <ItemCount stock={stock} cantidades={tomarCantidad}/>
                <div className='box-count-onadd'>
                <button  onClick={onAdd}>Agregar al carrito</button>
                </div>
                </div>
                <p className='card-details'><Link to={`/productos/${name}/${id}`} className='card-link'>Ver detalles</Link></p>
            </div>
        </div>
    </div>
      </div>
 <div class="col-3">
        <div className='card-box'>
        <div className='card'>
            <img className='card-img' alt='producto' src={image}></img>
            <div>
                <h6 className='card-name'>{name}</h6>
                <p className='card-price'>${price}</p>
                <div  className='box-count'>
                <ItemCount stock={stock} cantidades={tomarCantidad}/>
                <div className='box-count-onadd'>
                <button  onClick={onAdd}>Agregar al carrito</button>
                </div>
                </div>
                <p className='card-details'><Link to={`/productos/${name}/${id}`} className='card-link'>Ver detalles</Link></p>
            </div>
        </div>
    </div>
      </div>
    </div>
  </div>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>
</html>

2
  • hice lo que me recomendaste: agregue el container, row y col pero me trabe en lo del bucle. podria ayudarme mas con respecto a eso?
    – feli
    Commented el 7 feb. 2023 a las 17:25
  • espera que creo que lo tengo hecho en un proyecto, te puede servir de ejemplo Commented el 10 feb. 2023 a las 14:22
0

<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 { useEffect, useState } from "react";
import axios from 'axios';
import Card from 'react-bootstrap/Card';
import { Link } from 'react-router-dom';
import * as ReactBootStrap from 'react-bootstrap';


const baseURL = "http://localhost/Clinica_Veterinaria/backend/crud/api/leerRoles.php";


const AllRoles = () => {
    const [loading, setLoading] = useState(true);
    const [roles, setRol] = useState([]);

    ///FORMA CON FETCH 
    useEffect(() => {
        axios
            .get(`${baseURL}`)
            .then((response) => {
                setRol(response.data);
            })
            .catch(err => { console.log(err.message) });
    }, []);
    console.log(roles);

    const renderCard = (card, index) => {

        return <>
            <Card className=" col-1 col-md-4 mx-auto" key={index}>
                <Card.Header className='text-center bg-primary text-white'>
                    <h3>Tipo de rol</h3>
                </Card.Header>
                <Card.Body className='text-center'>
                    <Link to={card.rol} className="text-capitalize text-decoration-none fs-2 text-dark">{card.rol}</Link>
                </Card.Body>
            </Card>
          
        </>
    }
    return <div className='app row row-cols-12 gap-5 justify-content-md-center'>
        <ReactBootStrap.Spinner animation="border"/>
        {roles.length ? roles.map(renderCard) : "No se encontraron elementos para mostrar en el menu de roles"}
    </div>

}
export default AllRoles;

yo lo tengo hecho así, cojo de la api los datos , luego llamo al component card y le paso los datos cada recorrido del bucle, y eso te crea, según los datos que tengas x cartas, tendrías que crearte el componente card con parámetros de entrada en sus valores

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.