正在 Bootstrap 卡片中获取 MongoDB 数据

Question

我正在从 MongoDB 获取一些数据并尝试将其显示在 Bootstrap 5 张卡片中。虽然我的代码工作正常并且数据已正确提取到 Bootstrap 卡片中，但如果我在数据库中有 10 个条目，则 10 张卡片会显示在同一行中。

相反，我想要做的是使用 Bootstrap 网格并每行最多显示三张卡片。我怎样才能在这里做到这一点？

这是显示卡片的页面：

import axios from "axios"

import Navbar from "../../components/Navbar"
import ProductCard from "../../components/ProductCard"

export default function starters({ productList }) {
    return (
        <div className="container-fluid p-0">
            <Navbar></Navbar>
            <div className="container text-center">
                <h1 className="display-3">Starters</h1>
                <div className="container text-center">
                    <div className="row">
                        <div className="col-md-4">
                            {productList.map((Product) => (
                                <ProductCard key={Product._id} Product={Product}></ProductCard>
                            ))
                            }
                        </div>
                    </div>

                </div>
            </div>
        </div>
    )
}

export const getServerSideProps = async () => {
    const res = await axios.get("http://localhost:3000/api/products")
    return {
        props: {
            productList: res.data,
        },
    }
}

这是卡片组件：

export default function Products({Product}) {
    return (
        <>
            <div className="card m-5" style={{width: "18rem;"}}>
                <img src={Product.img} className="card-img-top" alt="..."/>
                    <div className="card-body">
                        <h5 className="card-title">{Product.title}</h5>
                        <p className="card-text">{Product.desc}</p>
                        <p className="card-text">{Product.prices[0]}</p>
                        <a href="#" className="btn btn-primary">Go somewhere</a>
                    </div>
            </div>
        </>
    )
}

Answer 1

我认为你必须将此 <div className="col-md-4"> 移动到 Products。

export default function Products({Product}) {
    return (
        <div className="col-md-4">
            <div className="card m-5" style={{width: "18rem;"}}>
                <img src={Product.img} className="card-img-top" alt="..."/>
                    <div className="card-body">
                        <h5 className="card-title">{Product.title}</h5>
                        <p className="card-text">{Product.desc}</p>
                        <p className="card-text">{Product.prices[0]}</p>
                        <a href="#" className="btn btn-primary">Go somewhere</a>
                    </div>
            </div>
        </div>
    )
}

正在 Bootstrap 卡片中获取 MongoDB 数据

Fetching MongoDB data in Boostrap cards

javascript

mongodb

twitter-bootstrap

next.js