Я пытаюсь создать сетку из трех столбцов с помощью Bulma в Nextjs. Данные поступают из конечной точки JSON.

Я успешно получил данные, и они отлично загружаются.

Но я не могу найти, что я делаю не так в этом случае.

Могу ли я как-нибудь ограничить столбец. В Bootstrap я сделал Col sm={4}, чтобы ограничить до 3 столбцов. Не знаю, как это сделать в Бульме

Это выглядит так .

Я получил код для SplitEvery из этого вопроса SO (Добавляйте новый контейнер столбцов через каждые 3 элемента столбца в React.js с Bulma.css)

enter image description here

Это именно то, что я хочу. Мне просто нужны 3 столбца (3 карты подряд), как показано ниже

enter image description here

Вот код моего 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;
1
Ava Juan 22 Сен 2021 в 16:08

2 ответа

Лучший ответ

Ваша проблема возникает из-за того, что Bulma основана на Flexbox. С помощью приведенного выше кода вы, по сути, вызываете свою функцию (с тем, что я предполагаю в соответствии с опубликованным изображением), которая действует с массивом чисел 1-7. По умолчанию все элементы Flexbox будут пытаться уместиться в одну строку. Поэтому он выплевывает карточку на каждое число в одной строке.

Из документации (Дополнительная информация здесь) «Каждый раз, когда вы хотите начать новый line, вы можете закрыть контейнер столбцов и начать новый. Но вы также можете добавить модификатор is-multiline и добавить больше элементов столбца, чем поместится в одной строке ».

Поэтому все, что вам нужно сделать, это добавить is-multiline в div, содержащий className="columns", а также добавить is-one-third в div, содержащий className="column", чтобы определить, сколько места занимает каждая карта. вверх. Это один из недостатков такого фреймворка, как Bulma; вы можете быть ограничены определенными вещами, которые вы хотите делать.

В целом это должно выглядеть примерно так:

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>
  );
};

Примечание: я воссоздал это на локальном компьютере, и он работал нормально.

1
wayoh22 22 Сен 2021 в 13:51

Вы можете положиться на CSS для разделения столбцов. Как и Bootstrap, Bulma также использует 12 макетов столбцов - см. размеры столбцов и адаптивные столбцы.

Вам также необходимо добавить имя класса is-multiline, чтобы элементы можно было обернуть. и удалите код SplitEverything - он больше не нужен.

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>
);
0
Sean W 22 Сен 2021 в 13:59