我試圖在Nextjs中用Bulma創建一個3列的卡片網格。資料來自于JSON端點。
我成功地獲取了資料，而且獲取得非常完美。
但是，我找不到我在這種情況下做錯了什么。
有沒有辦法讓我限制這一欄。在Bootstrap中，我做了Col sm={4}來限制3列。不知道如何在Bulma中做到這一點
它是一個很好的例子。
它是這樣出現的。 我從這個SO問題中得到了 這正是我想要的。我只想要3欄（一排3張卡），如下所示 這里是代碼。
以下是我的
標籤： 上一篇：型別腳本--迭代中的訂閱
SplitEvery的代碼（
index.jsimport Head from "next/head"/span>;
import Image from "next/image"/span>;
匯入樣式 從 ".../styles/Home.module.css"。
export const getStaticProps = async ( ) => {
const res = await fetch("http://localhost:3000/lorem.json"/span>);
const data = await res.json();
console.log（資料）。
return {
props: { number: data },
};
};
//下面的部分是從中參考的
//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>/span>
{splitEvery(numbers, 3).map((number) => (
<div className="columns">
{numbers.map((number) => (
<div className=" column" key={number. id}>
<div className="card"/span>>
<div className="card-content"/span>>
<p className="title is-4"/span>>