0
554
ViewsProblema al crear una cuadrícula de tarjeta de 3 columnas usando Bulma y Nextjs (buscar)
Estoy tratando de crear una cuadrícula de tarjetas de 3 columnas con Bulma en Nextjs. Los datos provienen de JSON Endpoint.
Recuperé con éxito los datos y se está recuperando perfectamente.
Pero, no puedo encontrar lo que estoy haciendo mal en este caso.
¿Hay alguna forma en que pueda limitar la columna? En Bootstrap hice Col sm={4} para limitar a 3 columnas. No estoy seguro de cómo hacer eso en Bulma
Está apareciendo así.
Obtuve el código para SplitEvery de esta pregunta SO ( agregue un nuevo contenedor de columnas cada 3 elementos de columna en React.js con Bulma.css )
Esto es exactamente lo que quiero. Solo quiero 3 columnas (3 tarjetas en una fila) como a continuación
Aquí está el código de mi index.js
import Head from "next/head"; import Image from "next/image"; import styles from "../styles/Home.module.css"; export const getStaticProps = async () => { const res = await fetch("http://localhost:3000/lorem.json"); const data = await res.json(); console.log(data); return { props: { number: data }, }; }; //Below Part is referred from //https://stackoverflow.com/questions/54187450/add-new-columns-container-every-3-column-elements-in-react-js-with-bulma-css const splitEvery = (array, length) => array.reduce((result, item, index) => { if (index % length === 0) result.push([]); result[Math.floor(index / length)].push(item); return result; }, []); const Home = ({ numbers }) => { return ( <div> {splitEvery(numbers, 3).map((number) => ( <div className="columns"> {numbers.map((number) => ( <div className="column" key={number.id}> <div className="card"> <div className="card-content"> <p className="title is-4">💠 {number.name}</p> </div> </div> </div> ))} </div> ))} </div> ); }; export default Home;2 answers
Answer question0
Tu problema surge porque Bulma está basada en Flexbox. Con el código anterior, esencialmente está llamando a su función (con lo que asumo de acuerdo con la imagen publicada) que actúa en una matriz de números 1-7. De forma predeterminada, todos los elementos de Flexbox intentarán encajar en una línea. Por lo tanto, es escupir una carta por cada número en una línea.
De la documentación, ( Más información aquí ) "Siempre que desee comenzar una nueva línea, puede cerrar un contenedor de columnas y comenzar uno nuevo. Pero también puede agregar el modificador is-multiline y agregar más elementos de columna de los que cabrían una sola fila".
Por lo tanto, todo lo que tiene que hacer es agregar is-multiline al div que contiene className="columns" y también agregar is-one-third al div que contiene className="column" para definir cuánto espacio ocupa cada tarjeta. Este es uno de los inconvenientes con un marco como Bulma; puedes estar limitado a ciertas cosas que quieres hacer.
En general, debería verse como algo como:
const Home = ({ numbers }) => { return ( <div> {splitEvery(numbers, 3).map((number) => ( <div className="columns is-multiline"> {numbers.map((number) => ( <div className="column is-one-third" key={number.id}> <div className="card"> <div className="card-content"> <p className="title is-4">💠 {number.name}</p> </div> </div> </div> ))} </div> ))} </div> ); };Nota: Recreé esto en una máquina local y funcionó bien.
0
Puede confiar en CSS para dividir sus columnas. Al igual que Bootstrap, Bulma también usa diseños de 12 columnas: consulte los tamaños de columna y las columnas receptivas .
También debe agregar el nombre de clase is-multiline para que los elementos se envuelvan y eliminen el código SplitEverything ; ya no es necesario.
const Home = ({ numbers }) => ( <div className="columns"> {numbers.map((number) => ( <div className="column is-multiline is-12-mobile is-6-tablet is-4-desktop" key={number.id}> <div className="card"> <div className="card-content"> <p className="title is-4">💠 {number.name}</p> </div> </div> </div> ))} </div> );